Populating table in a partial view - asp.net-mvc

Question

I have two model classes,
public class Claims //Goes into main view
{
public int Id { get; set; }
public string ClaimName { get; set; }
public List<ClaimDetails> ClaimList { get; set; }
}
public class ClaimDetails //Class I want in my partial view
{
public int ClaimNumber { get; set; }
public string Client { get; set; }
public int Amount { get; set; }
public string Type { get; set; }
}
My controller,
public class ClaimsController : Controller
{
public ActionResult Index()
{
Claims claims = new Claims();
claims.Id = 1;
claims.ClaimName = "Ashton";
return View(claims);
}
[HttpPost]
public ActionResult SearchList(string enterdNumber)//On click of button I come here using ajax call
{
ClaimDetails cD = new ClaimDetails();
Claims cms = new Claims();
cms.ClaimList = new List<ClaimDetails>();
cD.ClaimNumber = 10;
cD.Client = "Ashton";
cD.Amount = 2900;
cD.Type = "Vendor";
cms.ClaimList.Add(cD);
ClaimDetails cDD = new ClaimDetails();
cDD.ClaimNumber = 10;
cDD.Client = "Ashton";
cDD.Amount = 2900;
cDD.Type = "Vendor";
cms.ClaimList.Add(cDD);
return PartialView("SearchList",cms);
}
My main view in which I want my partial view to be rendered,
#using BusinessLayer
#model BusinessLayer.Claims
#{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>
<div class="row">
<div class="col-md-6">
#Html.LabelFor(m => m.Id):#Model.Id
</div>
<div class="col-md-6">
#Html.LabelFor(m => m.ClaimName):#Model.ClaimName
</div>
</div>
<div class="row">
<div class="col-md-6">
<input id="searchNumber" placeholder="Enter the number" type="text" />
</div>
<div class="row">
<button id="searchBtn" type="button">Search</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
#Html.Partial("SearchList",Model.ClaimList)
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#searchBtn").on("click", function () {
var enteredNum = $("#searchNumber").val();
$.ajax({
type: "POST",
url: "/Claims/SearchList",
data: { enterdNumber: enteredNum }
});
});
});
</script>
My partial view,
#model BusinessLayer.Claims
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>Claim Number</th>
<th>Client</th>
<th>Amount</th>
<th>Type</th>
</tr>
<tbody>
#if (Model.ClaimList != null)
{
foreach(var item in Model.ClaimList)
{
<tr>
<td>#item.ClaimNumber</td>
<td>#item.Client</td>
<td>#item.Amount</td>
<td>#item.Type</td>
</tr>
}
}
</tbody>
</table>
My control comes to my partial view page, which I confirmed using breakpoint, it also iterates through the foreach loop but still does not put rows into my table..Help to know where I am going wrong is appreciated, or may be my approach to partial view is itself wrong?

Answer 1

You're returning a partial view but you're not doing anything with it. You need to include the success callback in the ajax function and add the partial view to the DOM
$.ajax({
type: "POST",
url: '#Url.Action("SearchList", "Claims")', // use this
data: { enterdNumber: enteredNum },
dataType: 'html', // add this
success: function(response) {
$('#someElement').html(response); // add this (adjust id to suit)
}
});
and assuming you want to update the existing partial, add an id attribute to the existing container
<div class="row">
<div class="col-md-12" id="someElement"> // add id attribute
#Html.Partial("SearchList",Model.ClaimList)
</div>
</div>
Side notes:
You may want to consider including the <table> and <thead>
element in the main view and have the partial only return the
<tbody> elements to minimize the data transfered in each ajax
call.
Your method appears to be just getting data based on a filter, so
the method could be a GET rather than a POST