-1

如何在 jquery 中使用 for 循环在 MVC4 应用程序的隐藏输入字段中编辑和存储多个编辑值

这是我的jQuery

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('p').click(function () {
            var textbox = $('<input id="Text1" type="text"  name="Name" />')
            var oldText = $(this).text();
            $(this).replaceWith(textbox);
            textbox.blur(function () {
                var newValue = $(this).val();
                var listItems = $('.listItem');
                listItems.each(function () {
                    $(this).replaceWith(
                    $('<p/>', { text: newValue })
                    .after(
                       $('<input />', { type: 'hidden', name: 'Name', value: newValue })
                    )
                );
                });
                });

              textbox.val(oldText);
        });
    });  


</script>
4

2 回答 2

1

假设您有一个模型：

public class User
{
    public string Name { get; set; }
    public string Address { get; set; }
}

然后是控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var user = new User
        {
            Name = "test1",
            Address = "add1"
        };
        return View(user);
    }

    [HttpPost]
    public ActionResult Index(User user)
    {
        return Content(
            string.Format(
                "name: {0}, address: {1}", 
                user.Name, 
                user.Address
            )
        );
    }
}

和一个观点：

@model User

@using (Html.BeginForm())
{
    <ul class="editor">
        <li>
            @Html.LabelFor(x => x.Name, Model.Name)
            @Html.EditorFor(x => x.Name)
        </li>
        <li>
            @Html.LabelFor(x => x.Address, Model.Address)
            @Html.EditorFor(x => x.Address)
        </li>
    </ul>

    <button type="submit">OK</button>
}

现在您可以使用以下 javascript：

$(function () {
    $('.editor input').blur(function () {
        $(this).hide();
        $(this).closest('li').find('label').html($(this).val()).show();
    });

    $('.editor label').click(function () {
        $(this).hide();
        $(this).closest('li').find('input').show();
    });
});

最后，为了最初隐藏输入字段，您可以定义.editor我应用于<ul>元素的 CSS 规则：

.editor input {
    display: none;
}
于 2012-07-03T11:31:50.800 回答
0

如果要在 jquery 中循环任何集合，请使用each(). 为什么for？

 $.each(collectionarray, function( index, value ) {
 // your code
 });
于 2012-07-03T07:45:31.103 回答