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

此外，我强烈建议您使用其他View文件来呈现表数据，否则，每当您单击按钮时，浏览器中的最终html都将包含重复的脚本标签和重复的按钮。

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

1 个答案: