jquery – 在asp.net mvc 3项目中渲染部分视图onclick

前端之家收集整理的这篇文章主要介绍了jquery – 在asp.net mvc 3项目中渲染部分视图onclick前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在我的mvc项目中,我有一个简单的项目列表,包括这样的crud操作:
<tbody>
 @{
    foreach (var item in Model)
    {            
         <tr>

            <td>@item.Title</td>
            <td>@item.Body</td>
            <td>@item.Price</td>
            <td><span class="EditLink ButtonLink" noteid="@item.Id">Edit</span>&nbsp;|&nbsp;<span>@Html.ActionLink("Delete","Delete",new { id = @item.Id})</span>
                            &nbsp;|&nbsp; @Html.ActionLink("Detalji","Details",new { id = @item.Id})
             </td>
        </tr>
     }
  }

</tbody>

我想知道,当我点击细节时,是否可以将表格细节视图显示为表格下的部分.
我的意思是当我叮叮叮叮ik show show show show me me……….

请帮忙.

解决方法

你可以使用AJAX.但是首先让我们通过摆脱这些循环并用显示模板替换代码来改进你的代码
@model IEnumerable<Someviewmodel>
<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Body</th>
            <th>Price</th>
            <th>actions ...</th>
        </tr>
    </thead>
    <tbody>
        @Html.DisplayForModel()
    </tbody>
</table>

<div id="details"></div>

然后定义一个显示模板(〜/ Views / Shared / DisplayTemplates / Someviewmodel.cshtml):

@model Someviewmodel
<tr>
    <td>@Html.DisplayFor(x => x.Title)</td>
    <td>@Html.DisplayFor(x => x.Body)</td>
    <td>@Html.DisplayFor(x => x.Price)</td>
    <td>
        <!-- no idea what the purpose of this *noteid* attribute on the span is
             but this is invalid HTML. I would recommend you using the
             HTML5 data-* attributes if you wanted to associate some
             Metadata with your DOM elements
        -->
        <span class="EditLink ButtonLink" noteid="@Model.Id">
            Edit
        </span>
        &nbsp;|&nbsp;
        <span>
            @Html.ActionLink("Delete",new { id = Model.Id })
        </span>
        &nbsp;|&nbsp; 
        @Html.ActionLink(
            "Detalji",// linkText
            "Details",// actionName
            null,// controllerName
            new { id = Model.Id },// routeValues
            new { @class = "detailsLink" }  // htmlAttributes
        )
    </td>
</tr>

现在剩下的是在另一个javascript文件中AJAXify这个细节链接

$(function() {
    $('.detailsLink').click(function() {
        $('#details').load(this.href);
        return false;
    });
});

当然,您有以下操作:

public ActionResult Details(int id)
{
    SomeDetailviewmodel model = ... fetch the details using the id
    return PartialView(model);
}

猜你在找的jQuery相关文章