如何将 json 变量从 CS 文件传递给 Javascript 函数？答案

【问题标题】：How to pass a json variable from a CS file to an Javascript function?如何将 json 变量从 CS 文件传递给 Javascript 函数？
【发布时间】：2012-08-23 04:47:15
【问题描述】：

我在 C# 中有一个方法，它创建用户凭据的 JSON 对象。下面是 CS 文件。

public string CreateLoginjson(string strErrorType, bool blIsAuthenticated)
{
    StringBuilder sbLoginJson = new StringBuilder();
    if (blIsAuthenticated)
    {
        sbLoginJson.Append("{LoginSuccess:1");
    }
    else
    {
        sbLoginJson.Append("{LoginSuccess:0");
    }

    if (strErrorType != string.Empty)
    {
        if (strErrorType.TrimEnd(new char[] { ',' }) == "Token" ||
                strErrorType.TrimEnd(new char[] { ',' }) == "BlankToken")
        {
            sbLoginJson.Append(",txtTestTokenNumber1:\"Error\"");
            sbLoginJson.Append(",txtTestTokenNumber2:\"Error\"");
            sbLoginJson.Append(",txtTestTokenNumber3:\"Error\"");
            sbLoginJson.Append(",txtTestTokenNumber4:\"Error\"");

        }


        if (strErrorType.TrimEnd(new char[] { ',' }) == "Password")
        {
            sbLoginJson.Append(",txtPassword:\"Error\"");

        }

        if (strErrorType.TrimEnd(new char[] { ',' }) == "UserName")
        {
            sbLoginJson.Append(",UserName:\"Error\"");

        }
        string strLoadErrorControlMessage = LoadErrorControl(strErrorType,
                string.Empty);

        if (strLoadErrorControlMessage!= string.Empty)
        {
            sbLoginJson.Append(",ErrorMessage:
            '" + strLoadErrorControlMessage + "'");
        }
    }
    sbLoginJson.Append("}");

    var LoginJson = sbLoginJson.ToString();
    return LoginJson;
}

现在，我需要将 LoginJson 传递给一个 JS 函数，该函数检查是否提供了不正确的凭据，该函数找到控件并为其添加一个属性 JS

function GetLoginJson(strLoginJson) {
    if (strLoginJson != '' && strLoginJson != undefined) {
        var objLoginJson = strLoginJson;

        if (objLoginJson.LoginSuccess == "1") {

        }
        else if (objLoginJson.LoginSuccess == "0") {

            if (objLoginJson.txtUserName != '' 
                 && objLoginJson.txtUserName != undefined) 
            {
                $('#txtUserName').attr("class", objLoginJson.txtUserName);
            }
            else 
            {
                $('#txtUserName').attr("class", "Input");
            }

            if (objLoginJson.txtPassword != '' 
                 && objLoginJson.txtPassword != undefined) 
            {
               $('#txtPassword').attr("class", objLoginJson.txtPassword);
            }
            else 
            {
                $('#txtPassword').attr("class", "Input");
            }
            if (objLoginJson.txtTestTokenNumber1 != '' 
                  && objLoginJson.txtTestTokenNumber1 != undefined) 
            {
                $('#txtTestTokenNumber1').attr("class", 
                                                objLoginJson.txtTestTokenNumber1);
            }
            else 
            {
                $('#txtTestTokenNumber1').attr("class", "Error");
            }
            if (objLoginJson.txtTestTokenNumber2 != '' 
                  && objLoginJson.txtTestTokenNumber2 != undefined) 
            {
               $('#txtTestTokenNumber2').attr("class", 
                                               objLoginJson.txtTestTokenNumber2);
            }
            else 
            {
                $('#txtTestTokenNumber2').attr("class", "Error");
            }

            if (objLoginJson.txtTestTokenNumber3 != '' && 
                 objLoginJson.txtTestTokenNumber3 != undefined) {
                $('#txtTestTokenNumber3').attr("class", 
                                                objLoginJson.txtTestTokenNumber3);
            }
            else 
            {
                $('#txtTestTokenNumber3').attr("class", "Error");
            }
            if (objLoginJson.txtTestTokenNumber4 != '' && 
                  objLoginJson.txtTestTokenNumber4 != undefined) {
                $('#txtTestTokenNumber4').attr("class", 
                                                objLoginJson.txtTestTokenNumber4);
            }
            else 
            {
                $('#txtTestTokenNumber4').attr("class", "Error");
            }

            $('#ErrorControl').html('');

        }
    }
}

我想将来自 CS 的 JSON 变量传递给这个 jQuery 语句 `$('#ErrorControl').html('');'

谢谢

【问题讨论】：

什么时候调用GetLoginJson方法？页面加载时？
不，不在页面加载时。一旦用户提供了他的所有凭据，就会调用此函数。如果用户遗漏了任何凭据，则会显示 ErrorControl。。
我想我了解您想要创建 JSON 数据的 HTML 表示。这是你的意思吗？ $('#ErrorControl').html("错误信息：" + objLoginJson.ErrorMessage);
为什么不使用 ajax 调用。它会调用一个服务器端方法，你可以从那个方法返回一个 json 对象
@FilmJ ：是的，我想创建 JSON 数据的 HTML 表示。但是，如果我添加您的代码行，则会收到未定义的错误。我想我需要从我的 CS 文件中添加这一行 .. sbLoginJson.Append(",ErrorMessage:'" + strLoadErrorControlMessage + "'");谢谢

标签： c# javascript jquery asp.net json

【解决方案1】：

如果用户提供了所有信息并单击了某些东西（任何控件），您可以从 jquery 发出 ajax 请求。如果您从 CS 返回一些错误消息，您可以直接使用该消息作为

$('#ErrorControl').html(response.d)

d = "从 CS 返回的字符串"。

其中 response 是成功函数的参数。 d 是接收对象的默认属性（变量）。

如果您不想直接显示字符串，请使用返回的数据并调用另一个 javascript 函数。

谢谢

【讨论】：

各位：感谢您的回复。回发的方法已经写好了。我也可以创建一个 JSON 对象。我的问题是，如果用户在未正确填写凭据的情况下单击登录按钮，则会显示来自 HTML 的错误消息，要求用户提供正确的信息。现在，创建用户凭据的 JSON 对象的方法返回一个字符串，我相信它必须传递给 JS 函数，到语句 $('#ErrorControl').html('');
u1502890，我在下面的帖子给出了所提出问题的答案——即如何将返回的 JSON 变量（实际上是对象或数组的解码 JSON 表示）传递给函数。它还演示了如何使用 ajax 请求调用“登录”网络服务。您对成功处理程序中解码的 JSON 的属性所做的确切操作可能是另一个问题的主题。

【解决方案2】：

首先，您可以尝试JavaScriptSerializer（查看链接）将任何对象序列化为 JSON，然后向客户端发送字符串响应。

对于服务器和客户端之间的通信，您可以使用 jquery 的 ajax 调用来调用您的 web 服务（例如），或者如果您构建 ASP.NET 站点或应用程序，那么您可以使用 PageMethods 并直接从 javascript 调用它。

如果您对 PageMethods 选项感兴趣，这里有一个相当不错且简单的tutorial。

【讨论】：

【解决方案3】：

用户1502890，

服务器端

我不太了解 C#，但您似乎正在尝试直接构建 JSON 字符串。构建一个对象然后使用内置语言命令或实用程序方法将其字符串化为 JSON 更为正常（并且更容易和更可靠）。我想这在 C# 中一定是可能的。

客户端

假设凭证字段在一个带有id="credentialsForm" 的表单中，并且服务器端脚本可以作为相对 URL “myCredentialsChecker.xtn”进行请求，那么 jQuery 将是这样的：

$(function() {
    function loginResponse(j) {
        j = j || {};
        if (j.LoginSuccess) {
            //...
        }
        else {
            $('#txtUserName').attr("class", j.txtUserName ? j.txtUserName : "Input");
            $('#txtPassword').attr("class", j.txtPassword ? j.txtPassword : "Input");
            $('#txtTestTokenNumber1').attr("class", j.txtTestTokenNumber1 ? j.txtTestTokenNumber1 : "Error");
            $('#txtTestTokenNumber2').attr("class", j.txtTestTokenNumber2 ? j.txtTestTokenNumber2 : "Error");
            $('#txtTestTokenNumber3').attr("class", j.txtTestTokenNumber3 ? j.txtTestTokenNumber3 : "Error");
            $('#txtTestTokenNumber4').attr("class", j.txtTestTokenNumber4 ? j.txtTestTokenNumber4 : "Error");
            $('#ErrorControl').html('');
        }
    }

    $("#credentialsForm").on('submit', function() {
        $.ajax({
            url: "myCredentialsChecker.xxx",
            data: $(this).serialize(),
            type: 'POST', // or 'GET'
            dataType: 'json',
            success: function(j) {
                loginResponse(j);
            ),
            error: function() {
                loginResponse();
            }
        });
        return false;
    });
});

备注

else{...} 子句中的所有内容都如上所述简化，因为'' 和undefined 都是虚假的，所以只需测试foo 就可以了。 if(){...} else{...} 的三元替代方案也使得代码更紧凑。
我不相信为返回的字符串设置类是正确的做法，但我没有改变这方面。

【讨论】：

由于您已将成功处理程序分解为一个单独的函数，因此您也可以只使用success: loginResponse, ... 并避免一些混乱。 =)
@Tomas Lycken，是的，可以，但我只是更喜欢以相同方式编写的成功和错误处理程序的对称性。一目了然地更容易看出它们之间的细微差别。在这种情况下，可读性高于效率。
...很高兴知道有人在检查这些东西:)

【解决方案4】：

我终于写了： CS文件为

public string CreateLoginjson(string strErrorType, bool blIsAuthenticated)
{
    StringBuilder sbLoginJson = new StringBuilder();
    if (blIsAuthenticated)
    {
        sbLoginJson.Append("{LoginSuccess:1");
    }
    else
    {
        sbLoginJson.Append("{LoginSuccess:0");
    }

    if (strErrorType != string.Empty)
    {
        if (strErrorType.TrimEnd(new char[] { ',' }) == "Token" || strErrorType.TrimEnd(new char[] { ',' }).Split(new char[] { ',' }).Contains("BlankToken"))
        {
            sbLoginJson.Append(",txtTestTokenNumber1:\"Error\"");
            sbLoginJson.Append(",txtTestTokenNumber2:\"Error\"");
            sbLoginJson.Append(",txtTestTokenNumber3:\"Error\"");
            sbLoginJson.Append(",txtTestTokenNumber4:\"Error\"");

        }

        if (strErrorType.TrimEnd(new char[] { ',' }) == "Password" ||  strErrorType.TrimEnd(new char[] { ',' }).Split(new char[] { ',' }).Contains("BlankPassword"))
        {
            sbLoginJson.Append(",txtPassword:\"Error\"");

        }

        if (strErrorType.TrimEnd(new char[] { ',' }) == "UserName" ||  strErrorType.TrimEnd(new char[] { ',' }).Split(new char[] { ',' }).Contains("BlankUserName"))
        {
            sbLoginJson.Append(",txtUserName:\"Error\"");
        }

        string strLoadErrorControlMessage = LoadErrorControl(strErrorType, string.Empty);

        if (strLoadErrorControlMessage != string.Empty)
        {
            PageTestApplicationLogin objPageTestApplicationLogin = new PageTestApplicationLogin(objClientConfiguration);
            sbLoginJson.Append(",ErrorMessage:'" + objPageTestApplicationLogin.GetTestApplicationLoginErrorHtml("", strLoadErrorControlMessage).Replace("'", "\"") + "'");
        }
        sbLoginJson.Append("}");
    }
    var LoginJson = sbLoginJson.ToString();
    return LoginJson;
}

JS 文件：

if (objLoginJson.ErrorMessage != '' && objLoginJson.ErrorMessage != undefined) {
    $('#ErrorControl').html(objLoginJson.ErrorMessage);
    $('#ErrorControl').find('#tblLoginError').css('display', 'block');
}
else {
    $('#ErrorControl').html("");
    $('#ErrorControl').find('#tblLoginError').css('display', 'none');
}

谢谢大家的建议..干杯....

【讨论】：