您所在的位置： 首页 > 最新热文 > 计算机探索

    MVC3剃刀 - 编辑可变长度列表剃刀、长度、编辑、列表

    2023-09-10 21:03:41 作者：空心人

    我跟史蒂芬·桑德森的博客 - 的http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

    当我尝试添加的项目另一行，而不是增加其发送我行的网址与返回的局部视图。

    如何发生，从而增加了实际的行吗？我prevent这种

    随着路径下我的code（因为我使用的领域）：

    MyWebUI

    地区/客户/ MyMoveItems / Index.cshtml 

      @model IEnumerable的＆LT; MovinMyStuff.Domain.Entities.MoveItem＆GT;
@using MovinMyStuff.WebUI.HtmlHelpers

@ {
ViewBag.Title =指数;
}

＆LT; H1＆gt;我的移动项目＆lt; / H1＆GT;
@using（Html.BeginForm（））
{
＆LT;表类=移动项目＆GT;
    ＆其中; TR＆GT;
        ＆LT;第i个
            项目
        ＆LT; /第i个
        百分位类=维头＆GT;
            大号
        ＆LT; /第i个
        百分位类=维头＆GT;
            W¯¯
        ＆LT; /第i个
        百分位类=维头＆GT;
            H
        ＆LT; /第i个
        百分位类=重头＆GT;
            重量
        ＆LT; /第i个
        百分位类=数量头＆GT;
            数量
        ＆LT; /第i个
        ＆LT;第i个
            Addt'l工作
        ＆LT; /第i个
    ＆LT; / TR＆GT;
    ＆其中; TR＆GT;
        ＆LT; TD合并单元格=7＆GT;
            ＆LT; D​​IV ID =editorRows＆GT;
                @foreach（以模型的VaR项）
                {
                    Html.RenderPartial（_ MoveItemEditorRow，项目）;
                }
            ＆LT; / DIV＆GT;
        ＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
＆LT; /表＆gt;
@ Html.ActionLink（添加项目，添加，新{面积=客户}，{新的id =的addItem}）
＆LT;输入类型=提交值=完成/＆GT;
}

    地区/客户/ MyMoveItems / _MoveItemEditorRow.cshtml 

      @model MovinMyStuff.Domain.Entities.MoveItem
@using MovinMyStuff.WebUI.HtmlHelpers

@using（Html.BeginCollectionItem（moveitems））
{
    ＆LT; D​​IV CLASS =editorRow＆GT;
＆其中; TR＆GT;
    ＆LT; TD类=项目名称＆GT;
        @ Html.TextBoxFor（型号=＆GT; model.MoveItemType）
        @ Html.ValidationMessageFor（型号=＆GT; model.MoveItemType）
＆LT; / TD＆GT;
＆LT; TD类=项维＆GT;
    @ Html.EditorFor（型号=＆GT; model.Length）
    @ Html.ValidationMessageFor（型号=＆GT; model.Length）
＆LT; / TD＆GT;
＆LT; TD类=项维＆GT;
    @ Html.EditorFor（型号=＆GT; model.Width）
    @ Html.ValidationMessageFor（型号=＆GT; model.Width）
＆LT; / TD＆GT;
＆LT; TD类=项维＆GT;
    @ Html.EditorFor（型号=＆GT; model.Height）
    @ Html.ValidationMessageFor（型号=＆GT; model.Height）
＆LT; / TD＆GT;
＆LT; TD类=项重＆GT;
        @ Html.EditorFor（型号=＆GT; model.Weight）
        @ Html.ValidationMessageFor（型号=＆GT; model.Weight）
＆LT; / TD＆GT;
＆LT; TD类=项目，数量＆GT;
        @ Html.EditorFor（型号=＆GT; model.Quantity）
        @ Html.ValidationMessageFor（型号=＆GT; model.Quantity）
＆LT; / TD＆GT;
＆LT; TD类=工作项目组＆GT;
    ＆LT;表类=工作项目＆GT;
        ＆其中; TR＆GT;
            ＆LT; TD＆GT;大会＆LT; / TD＆GT;
            ＆LT; TD＆GT;
            @ Html.EditorFor（型号=＆GT; model.Assemble）
            @ Html.ValidationMessageFor（型号=＆GT; model.Assemble）
            ＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
    ＆LT; /表＆gt;
    ＆LT;表类=工作项目＆GT;
        ＆其中; TR＆GT;
            ＆LT; TD＆GT;玻璃和LT; / TD＆GT;
            ＆LT; TD＆GT;
            @ Html.EditorFor（型号=＆GT; model.HasGlass）
            @ Html.ValidationMessageFor（型号=＆GT; model.HasGlass）
            ＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
    ＆LT; /表＆gt;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / DIV＆GT;
}
    pr工具有几个 是不是只有剃刀那几个

    地区/客户机/控制器/ MyMoveItemsControllers.cs 

     使用系统;
使用System.Collections.Generic;
使用System.Data这;
使用System.Data.Entity的;
使用System.Linq的;
使用的System.Web;
使用System.Web.Mvc;
使用MovinMyStuff.Domain.Entities;
使用MovinMyStuff.Domain.Concrete;

命名空间MovinMyStuff.WebUI.Areas.Client.Controllers
{
公共类MyMoveItemsController：控制器
    {
    私人EFDbContext DB =新EFDbContext（）;

    //
    // GET：/客户/ MyMoveItems /

    公众的ActionResult指数（）
    {
        变种moveitems = db.MoveItems.Include（米=＆GT; m.Move）;
        返回查看（moveitems）;
    }

    [HttpPost]
    公众的ActionResult指数（IEnumerable的＆LT;移动选项＆GT; moveitems）
    {
        返回视图（已完成，moveitems）;
    }

    公共PartialViewResult的Add（）
    {
        返回PartialView（_ MoveItemEditorRow，新移动选项（））;
    }
}
}

    HtmlHelpers / HTML prefixScopeExtension.cs 

     使用系统;
使用System.Collections.Generic;
使用的System.Web;
使用System.Web.Mvc;

命名空间MovinMyStuff.WebUI.HtmlHelpers
{
公共静态HTML类prefixScopeExtensions
{
    私人常量字符串idsToReuseKey =__html prefixScopeExtensions_IdsToReuse_;

    公共静态IDisposable的BeginCollectionItem（这HtmlHelper的HTML，串集合名）
    {
        VAR idsToReuse = GetIdsToReuse（html.ViewContext.HttpContext，集合名）;
        字符串的ItemIndex = idsToReuse.Count＆GT; 0？ 。idsToReuse.Dequeue（）：Guid.NewGuid（）的ToString（）;

        //自动完成=关是需要解决一个非常恼人的Chrome浏览器的行为由此重用旧值用户点击后退，这将导致xyz.index和XYZ后[...]值不同步。
        html.ViewContext.Writer.WriteLine（的String.Format（＆LT;输入类型= \隐藏\名称= \{0} .index \自动完成= \关\的价值= \{1} \ /＆gt;中，集合名，html.En code（的ItemIndex）））;

        返回BeginHtmlField prefixScope（HTML，的String.Format（{0} {1}]，集合名，的ItemIndex））;
    }

    公共静态IDisposable的BeginHtmlField prefixScope（这HtmlHelper的HTML，串htmlField preFIX）
    {
        返回新HtmlField prefixScope（html.ViewData.TemplateInfo，htmlField preFIX）;
    }

    私有静态队列＆LT;字符串＆GT; GetIdsToReuse（HttpContextBase HttpContext的，串集合名）
    {
        //我们需要使用下面的服务器端验证失败的ID相同的序列，
        //否则框架将不会呈现验证错误消息每个项目旁边。
        字符串键= idsToReuseKey +集合名;
        VAR队列=（队列＆LT;字符串＆GT;）httpContext.Items [关键];
        如果（队列== NULL）{
            httpContext.Items [关键] =队列=新问答LT;字符串＆GT;（）;
            VAR previouslyUsedIds = httpContext.Request [集合名+.index];
            如果（！string.IsNullOrEmpty（previouslyUsedIds））
                的foreach（$ p中$ pviouslyUsedIds.Split字符串previouslyUsedId（，））
                    queue.Enqueue（previouslyUsedId）;
        }
        返回队列;
    }

    私有类HtmlField prefixScope：IDisposable的
    {
        私人只读TemplateInfo templateInfo;
        私人只读字符串previousHtmlField preFIX;

        公共HtmlField prefixScope（TemplateInfo templateInfo，串htmlField preFIX）
        {
            this.templateInfo = templateInfo;

            previousHtmlField preFIX = templateInfo.HtmlField preFIX;
            templateInfo.HtmlField preFIX = htmlField preFIX;
        }

        公共无效的Dispose（）
        {
            templateInfo.HtmlField preFIX = previousHtmlField preFIX;
        }
    }
}
}

    脚本/ MMS-custom.js 

      $（＃的addItem）。点击（函数（）{
$阿贾克斯（{
    网址：this.href，
    缓存：假的，
    成功：函数（HTML）{$（＃editorRows）追加（HTML）。 }
}）;
返回false;
}）;

$（a.deleteRow）。生活（点击，函数（）{
$（本）。家长（div.editorRow：第一），删除（）;
返回false;
}）;

    查看/共享/ _ClientLayout.cshtml 

     ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;元字符集=utf-8/＆GT;
＆LT;冠军＆GT; @ ViewBag.Title＆LT; /标题＆GT;
＆LT;链接HREF =@ Url.Content（〜/内容/ Site.css）相对=样式类型=文本/ CSS/＆GT;
＆LT;脚本SRC =@ Url.Content（〜/脚本/ jQuery的-1.5.1.js）类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =@ Url.Content（〜/脚本/ MicrosoftAjax.js）类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =@ Url.Content（〜/脚本/ Modernizr的-2.5.3.min.js）类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =@ Url.Content（〜/脚本/ MMS-custom.js）类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
@（Html.Telerik（）。StyleSheetRegistrar（）
    .DefaultGroup（组=＆GT; group.Add（telerik.common.css）
                                。新增（telerik.default.css））
）
＆LT; /头＆GT;
＆LT;身体GT;
    ＆其中;节＆gt;
    @RenderBody（）
＆LT; /节＆gt;
＆LT; /身体GT;
＆LT; / HTML＆GT;

    解决方案

    试试这个：

    第一：确保您的jQuery code（脚本/ MMS-custom.js ）里面 $（的document.ready - 它看起来并不像它如果是这样，如果你上面张贴整个文件

    。

    如果说本身并不解决它，试试这个：

    二： 

      $（＃的addItem）。点击（函数（）{
    $阿贾克斯（{
        网址：this.href，
        缓存：假的，
        成功：功能（数据）{$（＃editorRows）追加（数据）。返回false;}
    }）;
    返回false;
}）;

    代替你的code：

      $（＃的addItem）。点击（函数（）{
$阿贾克斯（{
    网址：this.href，
    缓存：假的，
    成功：函数（HTML）{$（＃editorRows）追加（HTML）。 }
}）;
返回

    我使用的博客文章作为参考点时，也有类似的问题。

    I followed Steven Sanderson's blog - http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

    When I try to add another row of items, rather than adding the row it sends me to the url with the returned partial view.

    How do I prevent this from happening and hence add an actual row?

    My code below along with the path (as I am using Areas):

    MyWebUI

    Areas/Client/MyMoveItems/Index.cshtml

    @model IEnumerable<MovinMyStuff.Domain.Entities.MoveItem>
@using MovinMyStuff.WebUI.HtmlHelpers

@{
ViewBag.Title = "Index";
}

<h1>My Move Items</h1>
@using (Html.BeginForm())
{
<table class="move-item">
    <tr>
        <th>
            Item
        </th>
        <th class="dimension-header">
            L
        </th>
        <th class="dimension-header">
            W
        </th>
        <th class="dimension-header">
            H
        </th>
        <th class="weight-header">
            Wt
        </th>
        <th class="qty-header">
            Qty
        </th>
        <th>
            Addt'l Work
        </th>
    </tr>
    <tr>
        <td colspan="7">
            <div id="editorRows">
                @foreach (var item in Model)
                {
                    Html.RenderPartial("_MoveItemEditorRow", item);
                }
            </div>
        </td>
    </tr>
</table>
@Html.ActionLink("Add Item", "Add", new { area = "Client" }, new { id = "addItem" })
<input type="submit" value="Finished" />
}

    Areas/Client/MyMoveItems/_MoveItemEditorRow.cshtml

    @model MovinMyStuff.Domain.Entities.MoveItem
@using MovinMyStuff.WebUI.HtmlHelpers

@using (Html.BeginCollectionItem("moveitems"))
{
    <div class="editorRow">
<tr>
    <td class="item-name">
        @Html.TextBoxFor(model => model.MoveItemType)
        @Html.ValidationMessageFor(model => model.MoveItemType)
</td>
<td class="item-dimension">
    @Html.EditorFor(model => model.Length)
    @Html.ValidationMessageFor(model => model.Length)
</td>
<td class="item-dimension">
    @Html.EditorFor(model => model.Width)
    @Html.ValidationMessageFor(model => model.Width)
</td>
<td class="item-dimension">
    @Html.EditorFor(model => model.Height)
    @Html.ValidationMessageFor(model => model.Height)
</td>
<td class="item-weight">
        @Html.EditorFor(model => model.Weight)
        @Html.ValidationMessageFor(model => model.Weight)
</td>
<td class="item-qty">
        @Html.EditorFor(model => model.Quantity)
        @Html.ValidationMessageFor(model => model.Quantity)
</td>
<td class="work-items-group">
    <table class="work-items">
        <tr>
            <td>Assembly</td>
            <td>
            @Html.EditorFor(model => model.Assemble)
            @Html.ValidationMessageFor(model => model.Assemble)
            </td>
        </tr>
    </table>
    <table class="work-items">
        <tr>
            <td>Glass</td>
            <td>
            @Html.EditorFor(model => model.HasGlass)
            @Html.ValidationMessageFor(model => model.HasGlass)
            </td>
        </tr>
    </table>
</td>
</tr>
</div>
}

    Areas/Client/Controllers/MyMoveItemsControllers.cs

    using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MovinMyStuff.Domain.Entities;
using MovinMyStuff.Domain.Concrete;

namespace MovinMyStuff.WebUI.Areas.Client.Controllers
{ 
public class MyMoveItemsController : Controller
    {
    private EFDbContext db = new EFDbContext();

    //
    // GET: /Client/MyMoveItems/

    public ActionResult Index()
    {
        var moveitems = db.MoveItems.Include(m => m.Move);
        return View(moveitems);
    }

    [HttpPost]
    public ActionResult Index(IEnumerable<MoveItem> moveitems)
    {
        return View("Completed", moveitems);
    }

    public PartialViewResult Add()
    {
        return PartialView("_MoveItemEditorRow", new MoveItem());
    }
}
}

    HtmlHelpers/HtmlPrefixScopeExtension.cs

    using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Mvc;

namespace MovinMyStuff.WebUI.HtmlHelpers
{
public static class HtmlPrefixScopeExtensions
{
    private const string idsToReuseKey = "__htmlPrefixScopeExtensions_IdsToReuse_";

    public static IDisposable BeginCollectionItem(this HtmlHelper html, string collectionName)
    {
        var idsToReuse = GetIdsToReuse(html.ViewContext.HttpContext, collectionName);
        string itemIndex = idsToReuse.Count > 0 ? idsToReuse.Dequeue() : Guid.NewGuid().ToString();

        // autocomplete="off" is needed to work around a very annoying Chrome behaviour whereby it reuses old values after the user clicks "Back", which causes the xyz.index and xyz[...] values to get out of sync.
        html.ViewContext.Writer.WriteLine(string.Format("<input type=\"hidden\" name=\"{0}.index\" autocomplete=\"off\" value=\"{1}\" />", collectionName, html.Encode(itemIndex)));

        return BeginHtmlFieldPrefixScope(html, string.Format("{0}[{1}]", collectionName, itemIndex));
    }

    public static IDisposable BeginHtmlFieldPrefixScope(this HtmlHelper html, string htmlFieldPrefix)
    {
        return new HtmlFieldPrefixScope(html.ViewData.TemplateInfo, htmlFieldPrefix);
    }

    private static Queue<string> GetIdsToReuse(HttpContextBase httpContext, string collectionName)
    {
        // We need to use the same sequence of IDs following a server-side validation failure,  
        // otherwise the framework won't render the validation error messages next to each item.
        string key = idsToReuseKey + collectionName;
        var queue = (Queue<string>)httpContext.Items[key];
        if (queue == null) {
            httpContext.Items[key] = queue = new Queue<string>();
            var previouslyUsedIds = httpContext.Request[collectionName + ".index"];
            if (!string.IsNullOrEmpty(previouslyUsedIds))
                foreach (string previouslyUsedId in previouslyUsedIds.Split(','))
                    queue.Enqueue(previouslyUsedId);
        }
        return queue;
    }

    private class HtmlFieldPrefixScope : IDisposable
    {
        private readonly TemplateInfo templateInfo;
        private readonly string previousHtmlFieldPrefix;

        public HtmlFieldPrefixScope(TemplateInfo templateInfo, string htmlFieldPrefix)
        {
            this.templateInfo = templateInfo;

            previousHtmlFieldPrefix = templateInfo.HtmlFieldPrefix;
            templateInfo.HtmlFieldPrefix = htmlFieldPrefix;
        }

        public void Dispose()
        {
            templateInfo.HtmlFieldPrefix = previousHtmlFieldPrefix;
        }
    }
}
}

    Scripts/mms-custom.js

    $("#addItem").click(function () {
$.ajax({
    url: this.href,
    cache: false,
    success: function (html) { $("#editorRows").append(html); }
});
return false;
});

$("a.deleteRow").live("click", function () {
$(this).parents("div.editorRow:first").remove();
return false;
});

    Views/Shared/_ClientLayout.cshtml

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-2.5.3.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/mms-custom.js")" type="text/javascript"></script>
@(Html.Telerik().StyleSheetRegistrar()
    .DefaultGroup(group => group.Add("telerik.common.css")
                                .Add("telerik.default.css"))
)
</head>
<body>
    <section>
    @RenderBody()
</section>
</body>
</html>

    解决方案

    Try this:

    First: Make sure your jQuery code (Scripts/mms-custom.js) is inside $(document.ready -- it does not look like it is if that is if you posted your entire file above.

    If that doesn't fix it by itself, try this:

    Second:

    $("#addItem").click(function () {
    $.ajax({
        url: this.href,
        cache: false,
        success: function (data) { $("#editorRows").append(data);  return false;}
    });
    return false;
});

    in place of your code:

    $("#addItem").click(function () {
$.ajax({
    url: this.href,
    cache: false,
    success: function (html) { $("#editorRows").append(html); }
});
return

    I had a similar problem when using that blog post as a point of reference.

    上一篇：Asp.net的WebMethod - 返回字符串[]和使用JavaScript解析字符串、net、Asp、JavaScript

    下一篇：Ajax响应与JQuery的功能时，使用时不同的格式不同、功能、格式、Ajax

    相关推荐
     
    猜您喜欢
    揭秘东北神奇的俄罗斯族混血村子

    揭秘东北神奇的俄罗斯族混血村子

    精彩图集
    精彩推荐
    图片推荐

    探秘家（tanmijia.com），深层探秘世界自然奇观未解之谜，揭秘宇宙空间、人类、生物未解之谜,世界传闻、奇闻异事ufo未解之谜。有效真实科学探索天下奇观猎奇世界。

    © 2016-2021 探秘家. All Rights Reserved 浙ICP备20029812号-3