无法在mvc3中使用Mvc 4中的相同代码

时间:2012-07-02 11:02:08

标签: jquery asp.net-mvc-4

我的jquery是

 <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();
                $(this).replaceWith($('<p>' + newValue + '</p>').after($('<input id="Text1" type="text" name="Name" />',{ type: 'hidden', name: 'Name', value: newValue })));
            });
            textbox.val(oldText);
        });

    }); 

</script>

然后进行2个控制器操作(GET和POST):

public ActionResult Viewdetails()
{
    User ur = new User();
    ur.Name = "Danny";
    return View(ur);
}

[HttpPost]
public ActionResult Display(User model)
{
    return View(model);
}

Viewdetails.cshtml内:

@model User
@using (Html.BeginForm("Display", "Home", FormMethod.Post))
{
    <div>Name: <a>@Model.Name</a><br /></div>
    <input type="submit" value="Submit" /> 
    <br />
}

Display.cshtml

@model User
<div>You have selected: @Model.Name</div>

我无法在运行时编辑名称,这在mvc3中运行良好

1 个答案:

答案 0 :(得分:1)

试试这样:

textbox.blur(function () {
    var newValue = $(this).val();
    $(this).replaceWith(
        $('<a />', { text: newValue })
        .after(
            $('<input />', { type: 'hidden', name: 'Name', value: newValue })
        )
    );
});

更新:

完整示例:

型号:

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

控制器:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        User ur = new User();
        ur.Name = "Danny";
        return View(ur);
    }

    [HttpPost]
    public ActionResult Index(User model)
    {
        return Content(model.Name);
    }
}

查看(~/Views/Home/Index.cshtml):

@model AppName.Models.User
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <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 () {
        $('a').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();
                $(this).replaceWith(
                    $('<a/>', { text: newValue })
                    .after(
                        $('<input />', { type: 'hidden', name: 'Name', value: newValue })
                    )
                );
            });
            textbox.val(oldText);
        });
    }); 
    </script>
</head>
<body>
    @using (Html.BeginForm())
    {
        <div>Name:<a>@Html.DisplayFor(x => x.Name)</a></div>
        <input type="submit" value="Submit" /> 
    }
</body>
</html>