MVC Ajax Добавляет частичное представление с параметром идентификатора и моделью

#ajax #asp.net-mvc #model-view-controller #asp.net-ajax #partial-views

Вопрос:

Возможно, кто-то может помочь мне с моей проблемой или перенаправить меня на другое решение, которое, надеюсь, сработает.

Поэтому я совершенно новичок в ajax и не уверен, что делает код, который я использую. Вот и все, что я нашел в Интернете

Объяснение проблемы

На данный момент я создаю веб-сайт. На этом веб-сайте у меня есть данные из Sharepoint (таблица с данными, похожими на базу данных, но уже существующими, и нежелательно, чтобы это место было изменено на новую базу данных)

В моем рабочем представлении я показываю данные из таблицы Sharepoint. Кроме того, у меня есть база данных, в которой я храню данные, связанные с идентификатором данных Sharepoint. Эти данные должны отображаться только при выборе строки данных Sharepoint в представлении.

Представление таблицы

Как показано на рисунке, в таблице 1 показаны все данные таблицы Sharepoint. Таблица 2 должна отображаться при каждом нажатии кнопки «Добавить», но только если идентификатор не находится в области таблицы 2. Поэтому для каждых данных в таблице 1 следует создать новую таблицу с вложенными данными.

ожидаемый результат

Данные таблицы 2 должны появиться, когда я нажму кнопку добавить, но без перезагрузки веб-сайта из-за отсутствия данных в Sharepoint и в базе данных. Кроме того, данные базы данных должны загружаться только тогда, когда они необходимы, например, щелчок по идентификатору 3 должен загружать данные базы данных с идентификатором 3.

Пробованные задачи

В Интернете я всегда вижу метод с вызовом ajax. Когда моя страница загружается, данные Sharepoint передаются через модель (представление возврата(MyModel)), и я отображаю их с помощью движка Razor (@Html.Display….).

Чтобы загрузить подкласс, я нашел метод добавления частичного представления с помощью этого элемента ajax (код ниже). Первая проблема с этим заключается в том, что это не показывает мое частичное представление в представлении индекса, и моя следующая проблема заключается в том, что сначала мне нужно передать идентификатор, который нажат на контроллере, а во-вторых, я также должен передать модель контроллеру, чтобы я получил некоторые данные таблицы Sharepoint из определенного идентификатора, но для этой последней проблемы я думаю, что можно перезагрузить этот единственный идентификатор из sharepoint.

Code

HomeController

 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);
  }
}
 

Index

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

_тестовая часть

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

Может быть, кто-нибудь может мне помочь или перенаправить на пример, который описывает что-то подобное или в лучшем случае то же самое. Заранее благодарю вас за вашу помощь и не будьте со мной строги. Спасибо.

Ответ №1:

Теперь я решил свой собственный вопрос

Решение

Вместо того, чтобы пытаться отправить модель, я отправляю мне идентификатор из определенного поля.

Домашний контролер

 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>
 

_тестовая часть

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

Может быть, это поможет другим