使用viewmodel MVC Ajax将数据从控制器传递到模态对话框到部分视图

Question

我想使用视图模型将数据从我的控制器传递到模态对话框到部分视图，但它无法正常工作。 当我尝试将数据传递到我的视图模型 而没有模态对话框 时，结果很好 我已经把调试点和显示在我的视图模型中的值返回到我的局部视图但它没有显示任何内容。

我的视图中的代码

<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");
        }
    });
});

我的部分视图中的代码

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

我的控制器中的代码

[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);
}

我的模型客户端中的代码

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

我的模型中的代码

public class MasterType
{
   public string TypeCode { get; set; }
   public string TypeName { get; set; }
}

这是结果

Result for my modal dialog

Answer 1

您在加载视图时重新加载PartialView。看起来您只想在单击搜索后显示模态PartialView。

我会继续将模态结构放在View中并更改PartialView以生成表格。类似的东西：

查看

<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");
        }
    });
});

部分视图

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