使用 C# 类（jQuery、AJAX）的实例变量更新 HTML 表

Question

查看

<script type="text/javascript">
$(document).ready(function () {
    $("#getRates").click(function () {
        $.ajax(
            {
                type: "POST",
                url: '@Url.Action("GetDetail", "ControllerName")',
                data: {}
            }).success(function () {
                alert("hit!")
                $('#MyTable').load(location.href + " #MyTable")
            });
    });
});
</script>

 <button type="button" id="getRates" class="button getRates">Get Rates</button>
    <br /><br /><br />
    <table id="MyTable">
        <tr>
            <th width="15%">Name</th>
            <th width="15%">Address</th>
            <th width="15%">City</th>
            <th width="15%">State</th>
        </tr>
        <tr>
            <td>@GetRateModel.OriginName</td>
            <td>@GetRateModel.OriginAddress</td>
            <td>@GetRateModel.OriginCity</td>
            <td>@GetRateModel.OriginState miles</td>
        </tr>
        <tr>
            <td>@GetRateModel.DestName</td>
            <td>@GetRateModel.DestAddress</td>
            <td>@GetRateModel.DestCity</td>
            <td>@GetRateModel.DestState miles</td>
        </tr>
    </table>

控制器功能

[HttpPost]

    public ActionResult GetDetail(string origin, string destination, string billTo, bool flat, bool rpm)
    {

        GetRateModel total = new GetRateModel
        {
            OriginName = "Name",
            OriginAddress = "Address",
            OriginCity = "City",
            OriginState = "State",
            DestName = "Name",
            DestAddress = "Address",
            DestCity = "City",
            DestState = "State",

        };

        return PartialView("Index", total);
    }

型号

 public class GetRateModel
{

    public string OriginName { get; set; }
    public string OriginAddress { get; set; }
    public string OriginCity { get; set; }
    public string OriginState { get; set; }
    public string DestName { get; set; }
    public string DestAddresss { get; set; }
    public string DestCity { get; set; }
    public string DestState { get; set; }

这在我在模型中声明静态变量时有效，但我需要将它们设置为类的实例。我将如何连接我的表以根据我的模型实例进行更新？我已经看到了一个解决方案，它在模型中创建带有 foreach 循环和列表的行，但我认为这不是解决我的问题的最佳解决方案。

Answer 1

你需要更新你的视图如下：

@* try specifying the fully qualified name of your Model class here if the following line gives error *@ 
@model GetRateModel
<script type="text/javascript">
$(document).ready(function () {
    $("#getRates").click(function () {
        $.ajax(
            {
                type: "POST",
                url: '@Url.Action("GetDetail", "ControllerName")',
                data: { origin: "", destination: "", billTo: "", flat: true, rpm: true }
            }).success(function () {
                alert("hit!")
                //$('#MyTable').load(location.href + " #MyTable")
                $('#MyTable').html(response);
            });
    });
});
</script>

<button type="button" id="getRates" class="button getRates">Get Rates</button>
<br /><br /><br />
<div  id="MyTable">
@if (Model != null)
{
  <table>
    <tr>
        <th width="15%">Name</th>
        <th width="15%">Address</th>
        <th width="15%">City</th>
        <th width="15%">State</th>
    </tr>
    <tr>
        <td>@Model.OriginName</td>
        <td>@Model.OriginAddress</td>
        <td>@Model.OriginCity</td>
        <td>@Model.OriginState miles</td>
    </tr>
    <tr>
        <td>@Model.DestName</td>
        <td>@Model.DestAddress</td>
        <td>@Model.DestCity</td>
        <td>@Model.DestState miles</td>
    </tr>
  </table>
  }
</div>

欲了解更多信息：https://docs.microsoft.com/en-us/aspnet/mvc/overview/views/dynamic-v-strongly-typed-views

另外，我强烈建议您使用不同的视图文件来呈现表格数据，否则当您单击按钮时，浏览器中的最终 html 将包含重复的脚本标签和重复的按钮。