Home > Net >  MVC Ajax Append Partial View with ID Parameter and Model
MVC Ajax Append Partial View with ID Parameter and Model

Time:09-22

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.

Table 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.

CodePudding user response:

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

  • Related