asp.net – 通过Ajax Post – MVC3更新模型更改视图

我试图使用Ajax(我想)调用来更新我的模型值,然后在视图中反映出新的值。我目前只是用来测试的。

概述:

模型

public class MyModel
{
    public int Integer { get; set; }
    public string Str { get; set; }
}

CONTROLLER

public ActionResult Index()
    {
        var m = new MyModel();
        return View("Test1",m);
    }

    [HttpPost]
    public ActionResult ChangeTheValue(MyModel model)
    {
        var m = new MyModel();
        m.Str = model.Str;
        m.Str = m.Str + " Changed! ";
        m.Integer++;

        return View("Test1",m);

    }

视图

@model Test_Telerik_MVC.Models.MyModel
@using Test_Telerik_MVC.Models
@{
    ViewBag.Title = "Test1";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
    Test1</h2>
@if (false)
{
    <script src="~/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery-ui.min.js" type="text/javascript"></script>
}
<h2>
    ViewPage1
</h2>

<div>
    <input type="button" onclick="changeButtonClicked()" id="changeButton" value="Click Me!" />
    <input type="text" value="@Model.Str" class="txt" id="str" name="Str"/>
    <div></div>
</div>

<script type="text/javascript">

    function changeButtonClicked() {
        var url = '@Url.Action("ChangeTheValue","Test1")';
        var data = '@Model';
        $.post(url,data,function (view) {
            $("#Str").value = '@Model.Str';
        });
    }

</script>

基本上,视图呈现带有文本框的按钮。我的唯一目的是简单地在文本框中显示我的模型(Str属性)的值。

我已经尝试过changeButtonClicked()函数的各种组合无效。 Test1是我的控制器的名称。我不明白的是当我调试它,控制器动作触发并正确设置我的值。如果我在输入标签的“@ Model.Str”部分放置一个断点,它会显示我的@ Model.Str等于已更改!哪个是对的。但是,一旦我的成功功能在javascript中触发,该值将恢复为原始值。

我可以通过更改输入类型来提交并将其包装在@ Html.BeginForm()部分中,但是我想知道如何/如何做到这一点?还是提交完成它的唯一方法?

谢谢

解决方法

在jQuery中的第一件事是设置输入值的正确方法是使用
$("#Str").val(@Model.Str);

接下来我们将看一下控制器,在Post操作结果中,您将返回ajax调用中的整个View。这意味着所有的html,脚本引用和javascript都在你的jquery post请求中返回。因为所有您尝试更新的是名为str的输入的值,所以我只是将该值返回为json,而没有其他值。

[HttpPost]
public ActionResult ChangeTheValue(MyModel model)
{
    var m = new MyModel();
    m.Str = model.Str;
    m.Str = m.Str + " Changed! ";
    m.Integer++;

    return Json(m.Str);

}

接下来我会把你的html输入放在一个所以你可以有jquery序列化你的模型,然后你可以改变你的jQuery的邮政编码为:

function changeButtonClicked() {
    var url = '@Url.Action("ChangeTheValue","Test1")';
    $.post(url,$('form').serialize(),function (view) {
        $("#Str").val(view);
    });
}

所有的serialize正在做的是将您的表单中的输入编码为一个字符串,如果一切都正确命名,aps.net将绑定到您的模型。

如果您需要让路由处理ajax调用和完整请求,您可以使用asp.net的IsAjaxRequest函数来测试请求并返回不同的结果,具体取决于请求是否为ajax。你会在你的控制器中做这样的事情:

[HttpPost]
public ActionResult ChangeTheValue(MyModel model)
{
    var m = new MyModel();
    m.Str = model.Str;
    m.Str = m.Str + " Changed! ";
    m.Integer++;

    if (Request.IsAjaxRequest) {
        return Json(m.Str);
    }
    else {
        return View("Test1",m);
    }
}

在上面的actionresult中,你正在做你以前做的一切,但现在正在测试请求类型,如果它是ajax,则返回一个Json结果的字符串值。如果请求不是来自ajax调用,则完整的View(html,脚本等)将返回以显示在浏览器中。

我希望这可以帮助你,并且是你正在寻找的。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


这篇文章主要讲解了“WPF如何实现带筛选功能的DataGrid”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“WPF...
本篇内容介绍了“基于WPF如何实现3D画廊动画效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这...
Some samples are below for ASP.Net web form controls:(from http://www.visualize.uk.com/resources/asp
问题描述: 对于未定义为 System.String 的列,唯一有效的值是(引发异常)。 For columns not defined as System.String, the only vali
最近用到了CalendarExtender,结果不知道为什么发生了错位,如图在Google和百度上找了很久,中文的文章里面似乎只提到了如何本地化(就是显示中文的月份)以及怎么解决被下拉框挡住的问题,谈
ASP.NET 2.0 page lifecyle ASP.NET 2.0 event sequence changed a lot since 1.1. Here is the order: App
静态声明: &#39; Style=&quot;position: relative&quot; AppendDataBoundItems=&quot;True&quot;&gt; (无 或 空 或
以下内容是从网络上搜集资料,然后整理而来的。不当之处,请不吝指教。(The following were from network, and edited by myself. Thanks in a
Imports System Imports System.Reflection Namespace DotNetNuke &#39;*********************************
Ok so you have all seen them: “8 million tools for web development”, “5 gagillion tools that if you
以下内容来源于: http://blog.csdn.net/cuike519/archive/2005/09/27/490316.aspx 问:为什么Session在有些机器上偶尔会丢失? 答:可能和
以下文章提到可以用“http://localhost/MyWebApp/WebAdmin.axd”管理站点: ---------------------------------------------
Visual Studio 2005 IDE相关的11个提高开发效率的技巧 英文原创来源于: http://www.chinhdo.com/chinh/blog/20070920/top-11-vis
C#日期格式化 from: http://51xingfu.blog.51cto.com/219185/46222 日期转化一 为了达到不同的显示效果有时,我们需要对时间进行转化,默认格式为:2007
from: http://www.nikhilk.net/UpdateControls.aspx Two controls that go along with the UpdatePanel and
Open the report in the Designer. In the ToolBox, select/expand the &quot;Report Items&quot; section.
from: http://drupal.org/node/75844 Do this: find which TinyMCE theme you are using. For the sake of
asp.net中给用户控件添加自定义事件 用户控件中定义好代理和事件: public delegate void ItemSavedDelegate(object sender, EventArgs
在Windows版本的Safari中浏览以下的页面。 http://www.asp.net/AJAX/Control-Toolkit/Live/Calendar/Calendar.aspx Calen
http://aspnet.4guysfromrolla.com/articles/021506-1.aspx By Scott Mitchell Introduction When creating