MVC Ajax 使用 ID 参数和模型附加部分视图

Question

也许有人可以帮助我解决我的问题或将我重定向到其他解决方案，希望能奏效。

所以我在 ajax 中是全新的，我不确定我正在使用的代码的作用。就是这样，我在网上找到的

问题的解释

目前我正在创建一个网站。在这个网站上，我有来自 Sharepoint 的数据（table 数据类似于数据库但已经存在并且不希望该位置将更改为新数据库）

在我的操作视图中，我显示了来自 Sharepoint table 的数据。此外，我还有一个数据库，我在其中存储与 Sharepoint 数据的 ID 相关的数据。此数据应该仅在我 select 视图中的 Sharepoint 数据行时出现。

Table View

如图table1显示Sharepointtable的所有数据。 table 2 应在每次单击“添加”时出现，但前提是 ID 不在 table 2 区域中。因此，对于 table 1 中的每个数据，它应该使用子数据创建一个新的 table。

预期结果

table2 的数据应该会出现，当我点击添加按钮时，但由于 Sharepoint 和数据库中的数据不一致而没有重新加载网站。此外，数据库的数据应该只在需要时加载，例如单击 ID 3 应该加载 ID 为 3 的数据库的数据。

尝试过的任务

在互联网上，我总是看到带有 ajax 调用的方法。当我的页面加载时，Sharepoint 数据通过模型 (return View(myModel)) 传递，我用 Razor 引擎显示它们 (@Html.Display...).

为了加载子类，我找到了使用此 ajax 元素附加局部视图的方法（下面的代码）。第一个问题是，这不会在索引视图中显示我的部分视图，我的下一个问题是，首先我需要将单击的 ID 传递给控制器，第二件事是我还必须将模型传递给我从特定 ID 获取 Sharepoint table 一些数据的控制器，但对于最后一个问题，我认为可以从 Sharepoint 重新加载该单个 ID。

代码

家庭控制器

public class HomeController : Controller
{
  private List<myModel> TestModel = new List<myModel>(); //just for test cases
  public ActionResult Index()
  {
    //Following List is only to simulate the data from Sharepoint
    TestModel.Add(new myModel { ID = 1, Name = "Try1", Value = 17 });
    TestModel.Add(new myModel { ID = 2, Name = "Try2", Value = 22 });

    return View(TestModel);
  }
  [HttpPost]
  public ActionResult LoadRest(string dataparam, List<myModel> MyModel)
  {
    int.TryParse(dataparam, out int id);
    var element = MyModel.Find(x => x.ID == id);
    return PartialView("_testPartial", element);
  }
}

索引

@model List<myModel>
@{
  ViewBag.Title = "Home";
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<h2>Partial Views - Demo</h2>

<table class="table">
  <tr>
    <th></th>
    <th>
      ID
    </th>
    <th>
      Name
    </th>
  </tr>
@foreach (var Item in Model)
{
  <tr>
    <td>
      <input id="btnLoad" type="button" value="Add"/>
    </td>
    <td>
      @Html.DisplayFor(modelItem => Item.ID)
    </td>
    <td>
      @Html.DisplayFor(modelItem => Item.Name)
    </td>
    <td>
      @Html.TextBox("txtname") @*Not sure hot to get id only by the button*@
    </td>
  </tr>
}
</table>
<br />

<!-- partial view container -->
<table id="divPartialViewContainer">
</table>

<script type="text/javascript">
  $(document).ready(function () {
    $('#btnLoad').click(function () {
      var data = $("#txtname").val();
      var TheModel = @Model;
      $.ajax({
        url: '/Home/LoadRest',
        type: 'post',
        data: {dataparam: data, MyModel: TheModel},
        success: function (result) {
            $('#divPartialViewContainer').append(result);
        },
        error: function (e) {
        }
      });
    });
});
</script>

_testPartial

@model myModel
<tr>
  <td>
    @Html.DisplayFor(modelItem => Model.ID)
  </td>
  <td>
    @Html.DisplayFor(modelItem => Model.Name)
  </td>
  <td>
    @Html.DisplayFor(modelItem => Model.Value)
  </td>
</tr>

也许有人可以帮助我或重定向到描述相似或最好情况相同的示例。感谢您之前的帮助，不要对我太严格。谢谢。

Answer 1

现在我解决了我自己的问题

解决方案

我没有尝试发送模型，而是向我发送了特定字段中的 ID。

家庭控制器

public class HomeController : Controller
{
    public ActionResult Index()
    {
        IEnumerable<TestModel> myModel = AMethodToGetData(); 
        return View(myModel);
    }
    [HttpPost]
    public ActionResult Details(int id)
    {
        TestModel myItem = MethodToGetItem(id)
        return PartialView("_testPartial", myItem);
    }
}

索引

@model List<TestModel>
@{
    ViewBag.Title = "Index";
}
<script>
    $(document).ready(function () {
        $(":button").click(function () {      //There another attribute should be used
            var getId = $(this).attr("name");
            $.ajax({
                url: "@Url.Action("Details", "Home")",
                type: "post",
                data: { id: getId },
                success: function (data) {
                    $("#test").append(data);
                },
                error: function () {
                    alert("Fails ");
                }
            });
        });
    });
</script>

<h2>Partial Views - Demo</h2>
<div style="height: 40vh; overflow:auto">
    <table class="table" id="tblDetails">
        <tr>
            <th>
                ID
            </th>
            <th>
                Name
            </th>
            <th></th>
        </tr>
        @foreach (var Item in Model)
        {
            <tr id="@Item.Id">
                <td>
                    @Html.DisplayFor(modelItem => Item.Id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => Item.Title)
                </td>
                <td>
                    <input type="button" value="Get Details" name="@Item.Id" />
                </td>
            </tr>
        }
    </table>
</div>
<br />

<div id="test">
</div>

_testPartial

@model TestModel
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Id)
        </th>
        <td>
            @Html.DisplayFor(model => model.Id)
        </td>
    </tr>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <td>
            @Html.DisplayFor(model => model.Title)
        </td>
    </tr>
    .
    .
    .
    .
</table>

也许这可以帮助其他人

MVC Ajax 使用 ID 参数和模型附加部分视图

MVC Ajax Append Partial View with ID Parameter and Model

ajax

model-view-controller

asp.net-mvc

asp.net-ajax

partial-views