使用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。

我会继续将模态结构放入视图中，然后将 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>