jquery - MVC 3 Razor - 在 Ajax 请求中访问 ViewData(Jquery、JavaScript)

Question

我正在编写一些代码，用户可以在提交表单之前检查数据库中是否已存在用户名。这是通过 onkeyup 事件处理程序来实现的，该处理程序从文本框中获取值并将其传递给 ajax 请求，该请求使用字符串参数调用我的 ActionResult 方法。我的 SQL 逻辑工作正常，我收到一个表示已存在或不存在的值。

我遇到的问题来 self 的 Controller ，我想返回该值。在我的 Jquery Ajax 请求的成功部分中，我尝试访问我的 ViewData["index name"] 但我的警报显示一个空字符串。

Javascript代码:

function searchUsername() {
     var filters = getFilterVals();
     $.ajax({
         url: '@Url.Action("UsernameSearch", "UserManager")',
         type: "POST",
         async: true,
         dataType: "text",
         data: "username=" + filters.username,
         success: function () {
             var str = '@ViewData["UserName"]';
             alert(str);
             $('#txtUsernameExists').val(str);
             configureGui();
             jQueryTableStyling();
         },
         error: function (data) {

         }
     });
}

function getFilterVals() {
     filters = new Object();
     filters.username = $('#createuser-usernamesearch #user_name').val();
     return filters;
}

C# Controller 代码:

public ActionResult UsernameSearch(string username)
{
    string output = DAL.usernameSearch(username);
    ViewData["Username"] = output;
    return PartialView("~/Views/Partial/_txtUsernameSearch.cshtml");
}

我做错了什么？欢迎提出任何建议。

Answer 1

ASP.NET:

public JsonResult UsernameSearch(string username)
{
            string output = DAL.usernameSearch(username);

            return Json(new
            {
                Html = PartialView("~/Views/Partial/_txtUsernameSearch.cshtml"),
                Username = output
            });
}

JS:

$.ajax({
            url: '@Url.Action("UsernameSearch", "UserManager")',
            type: "POST",
            async: true,
            dataType: "json",
            data: "username=" + filters.username,
            success: function (data) {

                var html = data.Html;
                var str = data.Username;
                alert(str);

                $('#txtUsernameExists').val(str);
                configureGui();
                jQueryTableStyling();
            },
            error: function (data) {

            }
        });