时间戳

首页 > 解决方案 > MVC Ajax 使用 ID 参数和模型附加部分视图

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

问题描述

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

所以我对 ajax 完全陌生，我不确定我正在使用的代码是做什么的。就是这样，我在网上找到的

问题说明

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

在我的操作视图中，我显示了 Sharepoint 表中的数据。此外，我有一个数据库，其中存储了与 Sharepoint 数据的 ID 相关的数据。只有当我在视图中选择 Sharepoint 数据行时，才会出现此数据。

表视图

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

预期结果

当我单击添加按钮时，应该会出现表 2 的数据，但是由于 Sharepoint 和数据库中的数据之间存在数据，因此没有重新加载网站。此外，数据库的数据应该只在需要时才加载，例如单击 ID 3 应该加载 ID 为 3 的数据库的数据。

尝试过的任务

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

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

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

标签： ajaxasp.net-mvcmodel-view-controllerasp.net-ajaxpartial-views

解决方案

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

解决方案

我没有尝试发送模型，而是将特定字段的 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>

也许这可以帮助别人

推荐阅读