#c# #ajax #model-view-controller #partial-views
#c# #ajax #model-view-controller #частичные просмотры
Вопрос:
Итак, при начальной загрузке страница загружается нормально со всеми заполненными данными… Как только я выполняю свой вызов ajax и возвращаю данные обратно.. Вместо заполнения моего частичного представления.. Он просто заполняет json в div…
public JsonResult UpdateSerialNumber(string serialNumber)
{
string connectionstring = configuration.GetConnectionString("DataBase");
using (SqlConnection connection = new SqlConnection(connectionstring))
{
string query = "Insert Into SerialNumbers (SerialNumber)"
"Values('" serialNumber "')";
SqlCommand command = new SqlCommand(query, connection);
connection.Open();
command.ExecuteNonQuery();
}
SqlConnection con = new SqlConnection(connectionstring);
string sql = "select * from SerialNumbers";
con.Open();
SqlCommand cmd = new SqlCommand(sql, con);
cmd.CommandType = CommandType.Text;
DataTable dt = new DataTable();
SqlDataAdapter ad = new SqlDataAdapter();
ad.SelectCommand = cmd;
ad.Fill(dt);
con.Close();
SerialNumbers sNum = new SerialNumbers();
string[] serialArray = dt.Rows.OfType<DataRow>().Select(k => k[1].ToString()).ToArray();
List<SerialNumbers> serial = serialArray.Select(s => new SerialNumbers { SerialNumber = s }).ToList();
SingleStageTerminal term = new SingleStageTerminal();
term.SerialNumbers = serial;
JavaScriptSerializer js = new JavaScriptSerializer();
//serialArray = js.Serialize(term.SerialNumbers);
return Json(serialArray);
ВЫЗОВ AJAX
<script>
self.url = '@Url.Action("UpdateSerialNumber")'
$(document).ready(function () {
// Get value on button click and show alert
$("#associate").click(function () {
var str = $("#SerialTb").val();
$.ajax(self.url,
{
type: "POST",
dataType: 'html',
data: ({ SerialNumber: str }),
async: true,
success: function (data) {
$("#serialPartial").html(data);
}
})
});
});
</script>
ВЫЗОВ ЧАСТИЧНОГО ПРОСМОТРА
<div id="serialPartial">
@{
@Html.Partial("_PartialViewSerialNumbers", Model.SerialNumbers)
}
</div>
ФАКТИЧЕСКИЙ ЧАСТИЧНЫЙ ПРОСМОТР
<div class="card w-100">
<h5 class="card-header"><b>Serial Numbers</b></h5>
<div class="card-body">
<div class="container">
<div class="card card-block user-card">
<ul id="SerialNumbersTest" class="scroll-list cards">
@if (ViewBag.Serials == null)
{
@foreach (var item in Model.SerialNumbers)
{
<li>
<h6 style="text-align:center">@item</h6>
</li>
}
}
else
{
@foreach (var item in ViewBag.Serials)
{
<li>
<h6 style="text-align:center">@item</h6>
</li>
}
}
</ul>
</div>
</div>
</div>
</div>
перед успехом ajax
[! [введите описание изображения здесь][1]] [1]
ПОСЛЕ успешного выполнения ajax
[! [введите описание изображения здесь] [2]][2]
Как вы можете видеть, JSON заполняется в DIV, и он фактически не входит в мой частичный результат.. кто-нибудь может помочь. [1]: https://i.stack.imgur.com/lxP1L.png [2]: https://i.stack.imgur.com/8NLhI.png
Комментарии:
1. Эта
$("#serialPartial").html(data);
строка просто помещает данные, которые вы возвращаете из ajax, в divserialPartial
.
Ответ №1:
В вашем частичном представлении нет какой-либо модели для отображения и нет ViewData вашего переданного объекта, но он не получен при частичном просмотре.
Также частичный просмотр вашего макета может быть его заголовком shows, поэтому добавьте
Макет = null
в верхней части страницы.
Вот ваши изменения шаг за шагом
в действии UpdateSerialNumber
От
public JsonResult UpdateSerialNumber(string serialNumber)
Для
public ActionResult UpdateSerialNumber(string serialNumber)
Измените возвращаемый тип с
return Json(serialArray);
Для
return View( "_PartialViewSerialNumbers" ,serialArray)
Удалите эту строку, которая отображается частично
@Html.Partial("_PartialViewSerialNumbers", Model.SerialNumbers)
Добавьте эту строку поверх частичного представления
@model string[]
@{
layout = null;
}
Заменить из
@foreach (var item in Model.SerialNumbers)
Для
@foreach (var item in Model)