渲染在asp.net MVC 3项目的onclick局部视图 [英] Render partial view onclick in asp.net mvc 3 project

问题描述

在我的MVC项目我有项目，像这样的CRUD操作一个简单的列表：

 ＆LT;＆TBODY GT;
 @ {
    的foreach（在型号VAR项）
    {
         ＆所述; TR＆GT;            ＆LT; TD＆GT; @ item.Title＆LT; / TD＆GT;
            ＆LT; TD＆GT; @ item.Body＆LT; / TD＆GT;
            ＆LT; TD＆GT; @ item.Price＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT;跨度类=EditLink ButtonLinknoteid =@ item.Id＆gt;编辑＆LT; / SPAN＆GT;＆安培; NBSP; |＆安培; NBSP;＆LT;跨度＆GT; @ Html.ActionLink（删除， 删除，新{ID = @ item.Id}）LT; / SPAN＆GT;
                            ＆放大器; NBSP; |＆放大器; NBSP; @ Html.ActionLink（Detalji，详细信息，新{ID = @ item.Id}）
             ＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
     }
  }＆LT; / TBODY＆GT;
 

我想知道是否有可能呈现的细节视图，在桌子底下的部分，当我上详情请点击。
我的意思是，当我短声的细节给我看细节来看，我想是我的一些格或段落桌子底下。

请帮忙。

解决方案

您可以使用AJAX。但首先让我们通过摆脱这些循环，并用显示模板替换它们提高你的code：

  @model IEnumerable的＆LT; SomeViewModel＆GT;
＆LT;表＆gt;
    ＆LT;＆THEAD GT;
        ＆所述; TR＆GT;
            ＆LT;第i个标题＆LT; /第i
            ＆LT;第i车身与LT; /第i
            ＆LT;第i价格与LT; /第i
            ＆LT;第i个动作...＆LT; /第i
        ＆LT; / TR＆GT;
    ＆LT; / THEAD＆GT;
    ＆LT;＆TBODY GT;
        @ Html.DisplayForModel（）
    ＆LT; / TBODY＆GT;
＆LT; /表＆gt;＆LT; D​​IV ID =细节＆GT;＆LT; / DIV＆GT;
 

和再定义一个显示模板（〜/查看/共享/ DisplayTemplates / SomeViewModel.cshtml ）

  @model SomeViewModel
＆所述; TR＆GT;
    ＆LT; TD＆GT; @ Html.DisplayFor（X =＆GT; x.Title）LT; / TD＆GT;
    ＆LT; TD＆GT; @ Html.DisplayFor（X =＆GT; x.Body）LT; / TD＆GT;
    ＆LT; TD＆GT; @ Html.DisplayFor（X =＆GT; x.Price）LT; / TD＆GT;
    ＆所述; TD＆GT;
        ＆LT;  - ！不知道这样做的目的* noteid *上跨度属性是什么
             但这是无效的HTML。我建议你​​使用
             HTML5数据 -  *属性，如果你想一些关联
             与DOM元素的元数据
         - ＆GT;
        ＆LT;跨度类=EditLink ButtonLinknoteid =@ Model.Id＆GT;
            编辑
        ＆LT; / SPAN＆GT;
        ＆放大器; NBSP; |＆放大器; NBSP;
        ＆LT;跨度＆GT;
            @ Html.ActionLink（删除，删除，新{ID = Model.Id}）
        ＆LT; / SPAN＆GT;
        ＆放大器; NBSP; |＆放大器; NBSP;
        @ Html.ActionLink（
            Detalji，// LINKTEXT
            详细信息，// actionName
            空，// controllerName
            新{ID = Model.Id} // routeValues
            新{@class =detailsLink} // htmlAttributes
        ）
    ＆LT; / TD＆GT;
＆LT; / TR＆GT;
 

现在，所有剩下的就是AJAXify这个细节在一个单独的JavaScript文件链接：

  $（函数（）{
    $（'。detailsLink'）。点击（函数（）{
        $（'＃细节'）负载（this.href）;
        返回false;
    }）;
}）;
 

：当然，你有下列行为即假设

 公共ActionResult的详细信息（INT ID）
{
    SomeDetailViewModel模型= ...使用id获取详细信息
    返回PartialView（模型）;
}
 

In my mvc project i have a simple list of items with crud operations like this:

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

I am wondering is it possible to render details view as partial under the table when i click on details. I mean when i clik details to show me details view, i want it under my table in some div or paragraph.

Please help.

解决方案

You could use AJAX. But first let's improve your code by getting rid of those loops and replacing them with display templates:

@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>

and then define a display template (~/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", "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>

Now all that's left is to AJAXify this details link in a separate javascript file:

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

Which assumes of course that you have the following action:

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

这篇关于渲染在asp.net MVC 3项目的onclick局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！