passing data to modal dialog from controller to partial view with viewmodel MVC Ajax

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>