MVC的Ajax附加部分視圖與ID引數和模型

目前，我創建了一個網站。在這個網站中，我有來自Sharepoint的資料（表的資料類似于資料庫，但已經存在，而且不希望該位置改變為新的資料庫）

在我的操作視圖中，我的資料來自Sharepoint （表的資料類似于資料庫，但已經存在，而且不希望該位置改變為新的資料庫）

在我的操作視圖中，我的資料來自Sharepoint。

在我的操作視圖中，我顯示來自Sharepoint表的資料。此外，我有一個資料庫，在那里我存盤了與Sharepoint資料的ID相關的資料。只有當我在視圖中選擇Sharepoint資料的行時，這些資料才會出現。

Table View

如圖所示，表1顯示Sharepoint表中的所有資料。表2應該在每次點擊 "添加 "時出現，但只有當ID不在表2區域時才會出現。因此，對于表1中的每一個資料，它應該創建一個帶有子資料的新表。

預期結果

當我點擊添加按鈕時，表2的資料應該出現，但由于Sharepoint和資料庫中的資料存在差異，因此無需重新加載網站。此外，資料庫中的資料應該只在需要時加載，例如點擊ID 3應該加載ID為3的資料庫資料。

嘗試的任務

在互聯網上，我看到的總是帶有ajax呼叫的方法。當我的頁面加載時，Sharepoint的資料通過模型（return View(myModel)）被移交，我用Razor引擎（@Html.Display....）來顯示它們。

為了加載子類，我嘗試了一些方法。

為了加載子類，我找到了用這個ajax元素附加一個部分視圖的方法（代碼如下）。第一個問題是，在索引視圖中沒有顯示我的區域視圖，我的下一個問題是，首先我需要將被點擊的ID傳遞給控制器，第二件事是，我還必須將模型傳遞給控制器，我從特定的ID中獲取Sharepoint表的一些資料，但對于最后一個問題，我認為可以從Sharepoint重新加載單個ID。

代碼

HomeController

public class HomeController : Controller
{
  private List<myModel> TestModel = new List<myModel>(); //just for test cases。
  public ActionResult Index() 
  {
    //Following List只是為了模擬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"/span>, element);
  }
}

Index

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

<h2>部分視圖 - 演示</h2>

<table class="table"> 
  <tr>/span>
    <th></th> 
    <th> 
      身份證
    </th> 
    <th> 
      名稱
    </th>名稱
  </tr> 
@foreach (var Item in Model)
{
  <tr> 
    <td> 
      < input id="btnLoad"  type="button" value="Add"/> 
    </td>/span>
    <td> 
      @Html.DisplayFor(modelItem => Item.ID)
    </td> 
    <td> 
      @Html.DisplayFor(modelItem => Item.Name)
    </td> 
    <td>/span>
      @Html.TextBox("txtname") @*不確定只通過按鈕獲得id的熱度*@。
    </td>
  </tr>/span>
}
</table> 
<br />/span>

<!--部分視圖容器-->
<table id="divPartialViewContainer">
</table> 

<script type="text/javascript">/span>
  $(document).ready(function () {
    $('#btnLoad').click(function () {
      var data = $("#txtname"/span>).val()。
      var TheModel = @Model;
      $.ajax（{
        url: '/Home/LoadRest'。
        type: 'post',
        data: {dataparam: data, MyModel: TheModel}。
        success: function (result) {
            $('#divPartialViewContainer').append（結果）。
        },
        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>

也許有人可以幫助我，或者轉到一個描述類似或最好相同的例子。謝謝你之前的幫助，請不要對我太過嚴格。謝謝你。

uj5u.com熱心網友回復：

現在我解決了我自己的問題

我沒有嘗試發送模型，而是從特定的欄位向我發送ID。

HomeController

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"/span>, myItem)。
    }

Index

@model List<TestModel>/span>
@{
    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（資料）。
                },
                error。function () {
                    alert("Fails") 。
                }
            });
        });
    });
</script>>

<h2>部分視圖 - 演示</h2> 
<div style="height: 40vh; overflow: auto">
    < table class="table" id="tblDetails"> 
        <tr> 
            <th> 
                身份證
            </th> 
            <th> 
                名稱
            </th>名稱
            <th></th> 
        </tr> 
        @foreach (var Item in Model)
        {
            <tr id="@Item.Id"> 
                <td>/span>
                    @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 />/span>

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

_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>

也許這可以幫助其他人

標籤：

上一篇：如何在Ajax錯誤時獲得傳遞的JSON資料？

下一篇：對pandas資料框中的特定月份和日期應用函式