Неполный просмотр не отображается должным образом после успешного вызова ajax

#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, в div serialPartial .

Ответ №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)