Question

我需要有关使用AJAX的建议。我正在设计一个View，用于显示主（上）部分中的列表数据。每行都有一个链接Select，它将刷新/填充两个div容器，其中的数据对应于单击的链接Select。

我知道我可以使用jQuery的$.load()或$.get()帮助程序与$('#select')来触发异步请求Ajax。 $.get()有一个重载版本，用于将Object routesVlue发送到控制器。我想我需要一个JavaScript函数。有一件事我不知道如何理清，可能很容易做到。我需要以某种方式区分所有Select链接，以便它们可以执行相同的JavaScript函数但请求不同的数据。我希望这是有道理的。提供此区别的值是ID。

所以我将有20个选择链接，每个链接应该执行该功能，根据不同的ID发送请求，以HTML，JSON等方式获取数据，然后用相应的数据刷新div容器。

我不知道是否应该在一个PartialView中使用PartialViews或JSON或PartialViews！

我该如何排序呢。

PS＆GT;我想我可以使用@Html.ActionLink(0来避免AJAX中的硬编码字符串。

<小时/> 编辑：假设我有数据：

Number  Start       End         Target          Usage       
A0000   24/11/2014  27/11/2014  Non-commercial  null            Select
A0000   02/05/2013  29/05/2013  Academic        Student00       Select
A0000   28/12/2013  17/02/2014  Non-commercial  Student00       Select
A0000   16/04/2014  27/01/2014  Non-commercial  null            Select
A0000   15/02/2014  14/01/2014  Academic        Student00       Select
A0000   06/08/2014  14/02/2014  Academic        null            Select
A0000   08/11/2014  04/03/2014  Non-commercial  null            Select
A0000   26/05/2014  13/04/2014  Academic        Student00       Select

最后一列包含填充另外两个div容器的链接。当我点击Select时，我想在一个容器中获取StudentXX的详细信息，让我们说div1以及div2中分配的所有模块。如果我有一个局部视图要填充，我会使用@Ajax.ActionLink("Select", "Details", "Students", <AJax options>, new { StudentID = m.ID })等。因为我希望Ajax同时执行两个操作，我担心我需要在JavaScript中创建自己的函数：

function populateDivs(StudentID) {
   $('#select').click(function(e) {
      e.preventDefault();
      var url1 = ('/Students/Details?ID=').concat(StudentID);
      var url2 = ('/ModuleJunction/List?ID=').concat(StudentID);
      $.get(url1, function(data) {
         $('#div1').html(data);
      });
      $.get(url2, function(data) {
         $('#div2').html(data);
      });
   });
}

我不能让它发挥作用。如何设置Select以使用不同的参数调用populateDivs(StudentID)。另一方面，jQuery是不引人注目的，我更喜欢使用它。我可以将每个Select链接命名为相应的StudentID，'Student1'，'Student5'等。然后在jQuery中，$('#Student1').click()会处理点击事件，但如果我有20个链接，我需要制作20个功能。必须有一些东西可以解决它。

<小时/> EDIT2：

<tr>
    <th>App. No.</th>
    <th>Start</th>
    <th>End</th>
    <th>Target</th>
    <th>Usage</th>
    <th>Link to paper version</th>
    <th>Info</th>
    <th colspan="3"></th>
</tr>
<tr>
    <td>APP0001</td>
    <td>01/06/2014</td>
    <td>08/06/2014</td>
    <td>Non-commercial</td>
    <td>null</td>
    <td></td>
    <td></td>
    <td><span class="link-to-details" data-id="1">Select</span></td>
    <td><a href="/Applications/Edit?ApplicationID=1">Edit</a></td>
    <td><a href="/Applications/Delete?ApplicationID=1">Delete</a></td>
</tr>

Answer 1

您可以使用jQuery .data()来存储和检索带有元素的任意数据。假设您的模型为IEnumerable<Student>且Student具有属性StudentID，则在您的视图中

<table>
  ....
  <tbody>
    @foreach(var item in Model)
    {
      <tr>
        // other table cells
        <td><button type="button" class="details" data-id="@item.StudentID">Select</button><td>
        ...
      <tr>
    }
  </tbody>
</table>
<div id="studentdetails"></div>
<div id="studentmodules"></div>

在剧本中

$('.details').click(function() {
  var studentID = $(this).data('id'); // get the student id associated with the element
  $('#studentdetails').load('@Url.Action("Details", "Student")', { id: studentID });
  $('#studentmodules').load('@Url.Action("Modules", "Student")', { id: studentID });
});

控制器方法的位置

public PartialViewResult Details(int ID)
{
  var model = // get the student details based on ID
  return PartialView(model); 
}

public PartialViewResult Modules(int ID)
{
  var model = // get the student modules based on ID
  return PartialView(model); 
}

注意我使用了button而不是a元素（您不导航），但如果您想要的话，它可以很容易地设置为看起来像链接。使用jQuery .load()而不是@Ajax.ActionLink()意味着您可以删除jquery.unobtrusive-ajax.js文件。

Ajax刷新View的mutpliple部分

1 个答案: