Partial View not rendering properly after ajax call success

Question

So on initial load the page loads fine with all data populated... Once i do my ajax call and bring the data back.. Instead of populating my partial view.. Its just populating the json to the 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 CALL

<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>

PARTIAL VIEW CALL

<div id="serialPartial">
                                @{
                                    @Html.Partial("_PartialViewSerialNumbers", Model.SerialNumbers)
                                }

                            </div>

ACTUAL PARTIAL VIEW

<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>

before ajax success

[![enter image description here][1]][1]

AFTER ajax sucess

[![enter image description here][2]][2]

As you can see, the JSON is being populated into the DIV and its not actually going into my partial result.. can anyone help. [1]: https://i.stack.imgur.com/lxP1L.png [2]: https://i.stack.imgur.com/8NLhI.png

Answer 1

Your Partial View Not Have any Model To Display and Don't have ViewData Your Pass Object But not Received on Partial View.

Also Partial View Have Your Layout may be its shows header so Add

Layout = null

on top of page.

Here is your changes Step by Step

in UpdateSerialNumber Action

From

 public JsonResult UpdateSerialNumber(string serialNumber)

To

 public ActionResult UpdateSerialNumber(string serialNumber)

Change Return Type From

 return Json(serialArray);

To

 return View( "_PartialViewSerialNumbers" ,serialArray)

Remove This Line Render Partial

@Html.Partial("_PartialViewSerialNumbers", Model.SerialNumbers)

Add This line On top of Partial View

@model string[]
@{ 
   layout = null;
}

Replace From

@foreach (var item in Model.SerialNumbers)

To

@foreach (var item in Model)