#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>
Может быть, это поможет другим