如何在 MVC Ajax 中更新文本框

Question

如何使用 MVC Ajax UpdateTargetId 选项更新文本框？

我是 MVC Ajax 应用程序的新手。请任何人帮助我。

谢谢， 庞库马尔潘迪安.T

Answer 1

您可以简单地将您想要更新的所有内容包装在一个 id 与您在 UpdateTargetId 属性中相同的 div 中，并返回新内容（具有新值的新文本框）。并且不要忘记将 Ajax 更新类型设置为替换（而不是追加）。

Answer 2

我们不能直接在 UpdateTargetId 属性中给文本框控件 ID。我们可以做一些工作来实现这一点。请使用相同的打击提及代码。

//这是ajax请求成功后的回调方法。

function fnOnSuccess(context) {

        alert(context); //this context having all the current ajax req & res information.

        var response = context.get_data(); //Using this get_data() method we can get the response from server.

        $('#txtajaxResponse')[0].value = response;    
    }


<!-- Code in .aspx page -->
<%=Ajax.ActionLink("TextBox in UpdateTargetId","GetInfo","Ajax",new AjaxOptions{OnSuccess = "fnOnSuccess"}) %>

<%=Html.TextBox("txtajaxResponse")%>

谢谢， 庞库马尔潘迪安.T

Answer 3

您可以使用

来实现这个简单的概念

1- 发布\获取

2- 阿贾克斯

注意：只需将 $("#myform").html() 替换为 $("#mytext").text = "data"

1- 使用 Get\Post

/////// Controller post and get simple text value 
[HttpPost]
    public string Contact(string message)
    { 
        return "<h1>Hi,</h1>we got your message, <br />" + message + " <br />Thanks a lot";
    }

//// 在视图中添加对 Javascript (jQuery) 文件的引用

@section Scripts{

<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.intellisense.js"></script>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>  
}

/// 然后添加 Post 方法如下：

<script type="text/javascript"> 

/// post and get text value

$("#send").on("click", function () {    
$.post('', { message: $('#msg').val() })  

//// empty post('') means post to the default controller, 
///we are not pacifying different action or controller
/// however we can define a url as following:
/// var url = "@(Url.Action("GetDataAction", "GetDataController"))"

         .done(function (response) {
             $("#myform").html(response);
        })
        .error(function () { alert('Error') })
        .success(function () { alert('OK') })
        return false;
    }); 

   </script>

2-你也可以使用 Get only，如下所示：

   /////Controller = Home
   //// Action = FullName
   ///// get only simple text message
    [HttpGet]
    public string FullName()
    { 
        return "full Name: Mahmoud Sayed";
    }

/// 在视图中：

 $("#getfullname").on("click", function () {
        var url = "@(Url.Action("FullName", "Home"))"
            $.get(url, {   })
            .done(function (response) {
                $("#myform").html(response)
            })
            .error(function () { alert('Error') })
            .success(function () { alert('OK') })
            return false;
        });
   </script>

---

3- 现在假设您想使用 $.Ajax 和 JSON 来实现：

// Post JSON data  add using System.Net;
    [HttpPost]
    public JsonResult JsonFullName(string fname, string lastname)
    {
        var data = "{ \"fname\" : \"" + fname  + " \" , \"lastname\" : \"" + lastname + "\" }";
//// you have to add the JsonRequestBehavior.AllowGet 
 //// otherwise it will throw an exception on run-time.
        return Json(data, JsonRequestBehavior.AllowGet);  
    }

然后，在您的视图中：添加事件单击输入类型按钮，甚至是来自提交： 只需确保您的 JSON 数据格式正确。

  $("#jsonGetfullname").on("click", function () { 
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "@(Url.Action("JsonFullName", "Home"))",
            data: "{ \"fname\" : \"Mahmoud\" , \"lastname\" : \"Sayed\" }",
            dataType: "json",
            success: function (data) {
                var res = $.parseJSON(data);
                $("#myform").html("<h3>Json data: <h3>" + res.fname + ", " + res.lastname)
            }, 
            error: function (xhr, err) {
                alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
                alert("responseText: " + xhr.responseText);
            } 
        })
    });

   </script>

干杯，

马哈茂德·赛义德