如何在MVC中更新Model值并在Razor视图中重新加载div

Question

这是我在Razor视图中的代码，它基本上通过从数据库中提取信息来显示表 -

@model List<EmpoyeeInfo.Models.FFX_HR_Employees>
@using System.Reflection;

@{
    ViewBag.Title = "Employee Information";
    var Properties = Model[0].GetType().GetProperties(BindingFlags.Public | BindingFlags.Instance).ToList();
    string[] head = new string[Properties.Count()];
}

<div id="web-top">

    <div id="horizontal-line"></div>
    <input class="search-box-text" type="text" spellcheck="false" placeholder="Search Individual Record..." title="Search Individual Record" id="searchbox" name="searchbox" />

</div>

<div id="web-main">
    <table class="employee-info">
        <tr>
            @foreach (var Property in Properties)
            {
                if (Property.Name.Equals("AnnualHolidayEntitlement"))
                {
                    <th colspan="2">@Property.Name</th>
                }
                else
                {
                    <th>@Property.Name</th>
                }
            }
        </tr>

        @foreach(var Row in Model)
        {
            <tr>
                @{
                    Type type = Row.GetType();
                    IList<PropertyInfo> props = new List<PropertyInfo>(type.GetProperties());
                }
                @foreach (PropertyInfo prop in props)
                {
                    if (prop.Name.Equals("AnnualHolidayEntitlement"))
                    {
                        <td contenteditable="true">@prop.GetValue(Row, null)</td>
                    }
                    else
                    {
                        <td>@prop.GetValue(Row, null)</td>
                    }
                }
                <td class="saveToDB">SAVE</td>
            </tr>
        }
    </table>
</div>

但是当我输入搜索框文本时，会调用ajax调用 -

$(document).ready(function () {
    $('.search-box-text').keypress(function () {
        getReport($(this).html());
    });
})

function getReport(Name) {
    $.ajax({
        url: '@Url.Action("Index", "Home")',
        type: 'POST',
        data: { Name: Name },
        dataType: "json",
        cache: false,
        success: function (result) {
            //do stuff;
        },
        error: function () {
            console.log("no display");
        }
    });
}

现在我如何重新加载div - “web-main”并更新Model值，以便在用户搜索名称时，表格也需要更新。

Answer 1

下面的代码会将结果附加到div'web-main'。您需要在代码中操纵jQuery的成功部分

$(document).ready(function () {
          $('.search-box-text').keypress(function () {
              getReport($(this).html());
          });
      })

      function getReport(Name) {
          $.ajax({
              url: '@Url.Action("Index", "Home")',
              type: 'POST',
              data: { Name: Name },
              dataType: "json",
              cache: false,
              success: function (data) {
                  //do stuff;
      console.log(data);
                $("web-main").append(JSON.stringify(data));
              },
              error: function () {
                console.log("no display");
              }  
          });
      }