passing data to modal dialog from controller to partial view with viewmodel MVC Ajax - asp.net-mvc

Question

I want to pass data to modal dialog from my controller to partial view using view model but it isn't working.
When I tried passing data to my view model without modal dialog and it's fine for the result
I have put debug points and showing the value in my view model return to my partial view but it isn't displaying anything.
Code in my View
<div class="col-sm-btn">
<button type="button" id="btnSearchType" class="btn bg">
<i class="material-icons">search</i>
</button>
</div>
#Html.Partial("~/Views/Dialog/Type.cshtml");
<script>
$("#btnSearchType").click(function () {
$.ajax({
type: "GET",
url: '#Url.Action("ListType", "MasterMaterial")',
data: {
category: $("#txtCategory").val()
},
dataType: "html",
success: function (response) {
$('#type').modal('show');
},
error: function (response) {
alert("error");
}
});
});
Code in my Partial View
#model List<MVC_Client.Models.MasterType>
<div class="modal fade" id="type" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="defaultModalLabel">Type</h4>
</div>
<div class="modal-body">
<div class="table-responsive">
<table id="listType" class="js-basic-example dataTable">
<thead>
<tr>
<th>Type Code</th>
<th>Type Namce</th>
</tr>
</thead>
<tbody>
#if (Model != null)
{
foreach (var type in Model)
{
<tr>
<td>#type.TypeCode</td>
<td>#type.TypeName</td>
</tr>
}
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Code in my Controller
[HttpGet]
public ActionResult ListType(string category)
{
MasterTypeClient mtc = new MasterTypeClient();
List<MasterType> listType = new List<MasterType>();
listType = mtc.GetListTypes(category).ToList();
return PartialView("~/views/DialogPages/Type.cshtml", listType);
}
Code in my Model Client
public IEnumerable<MasterType> GetListTypes(string category)
{
HttpClient client = new HttpClient();
client.BaseAddress = new Uri(BASE_URL);
client.DefaultRequestHeaders.Accept.Add(
new MediaTypeWithQualityHeaderValue("application/json"));
HttpResponseMessage response = client.GetAsync("MasterType/Category/" + (category)).Result;
if (response.IsSuccessStatusCode)
return response.Content.ReadAsAsync<IEnumerable<MasterType>>().Result;
return null;
}
Code in my Model
public class MasterType
{
public string TypeCode { get; set; }
public string TypeName { get; set; }
}
And here is for the result
Result for my modal dialog

Answer 1

You're loading your PartialView when the View loads. It looks like you want to only show the modal PartialView after search is clicked.
I would go ahead and put the modal structure in the View and change the PartialView to just generate the table. Something like:
View
<div class="col-sm-btn">
<button type="button" id="btnSearchType" class="btn bg">
<i class="material-icons">search</i>
</button>
</div>
<div class="modal fade" id="type" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="defaultModalLabel">Type</h4>
</div>
<div class="modal-body table-placeholder">
</div>
</div>
</div>
</div>
<script>
$("#btnSearchType").click(function () {
$.ajax({
type: "GET",
url: '#Url.Action("ListType", "MasterMaterial")',
data: {
category: $("#txtCategory").val()
},
dataType: "html",
success: function (response) {
$('.table-placeholder').html(response);
$('#type').modal('show');
},
error: function (response) {
alert("error");
}
});
});
Partial View
#model List<MVC_Client.Models.MasterType>
<div class="table-responsive">
<table id="listType" class="js-basic-example dataTable">
<thead>
<tr>
<th>Type Code</th>
<th>Type Namce</th>
</tr>
</thead>
<tbody>
#if (Model != null)
{
foreach (var type in Model)
{
<tr>
<td>#type.TypeCode</td>
<td>#type.TypeName</td>
</tr>
}
}
</tbody>
</table>
</div>