Maybe someone can help me with my problem or redirect me to an other solution, which hopefully works.
So I am completely new in ajax and I am not sure, what the code does which I am using. That's just that, what I found at the internet
Explanation of the Problem
At the moment I create a website. In this website, I have data from Sharepoint (table with data similar to a database but already exists and undesirable that location will change to the new database)
In my operation view I show the data from the Sharepoint table. Additionally I have a database, where I stored data which are connected with the ID of the Sharepoint data. This data should only appear when I select the row of the Sharepoint data in the view.
As in the figure the table 1 show all the data of the Sharepoint table. The table 2 should appear for every click at "Add" but only if the ID is not in the table 2 area. So for every data in table 1 it should create a new table with the sub data.
Expected Result
The data of table 2 should appear, when I click the add button, but without reloading the website due to the among of data in Sharepoint and in the database. Also the data of the database should only be load when they are needed such as a click of ID 3 should load the data of the database with the ID 3.
Tried tasks
At the internet there I see always the method with an ajax call. When my page loads, the Sharepoint data are handed over via the model (return View(myModel)) and I display them with the Razor engine (@Html.Display....).
To load the subclass I found the method to append an partial view with this ajax element (Code below). The first problem with that is that this do not show my partial view inside the index view and my next problem is that first I need to pass the ID which is clicked to the controller and the second thing is that I also must pass the model to the controller that I get some data of the Sharepoint table from the specific ID, but for that last problem I think it is possible to reload that single id from 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>
_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>
Maybe someone can help me or redirect to an example which describes that similar or in best case same. Thank you previously for your help and be not to rigorous with me. Thank you.
Now I solved my own question
Solution
Instead of trying to send the model I send me the ID from the specific field.
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", myItem);
}
}
Index
@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>
Maybe this can help others