打破文本框提交的特殊字符

时间:2017-12-07 06:46:41

标签: javascript c# jquery html asp.net

目前正在处理如果用户将特殊字符提交到“/”或“&”等文本框中的错误信息提交并显示在其个人资料页面上,但在页面重新加载时,所有输入框都是空的,用户无法再提交任何更改。这是在页面刷新之后,我刚刚填写的所有字段现在都是空白的,并且尝试将“test”提交到bio中我得到此控制台错误:

enter image description here

这是表单html:

<form class="login-signup-form">
    <label for="display-name">Display Name</label>
    <input id="display-name" name="display-name" type="text" placeholder="Name">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" placeholder="Email">
    <label for="twitter-link">Twitter link</label>
    <input id="twitter-link" name="twitter-link" type="url" placeholder="https://">
    <label for="instagram-link">Instagram link</label>
    <input id="instagram-link" name="instagram-link" type="url" placeholder="https://">
    <label for="youtube-link">YouTube link</label>
    <input id="youtube-link" name="youtube-link" type="url" placeholder="https://">
    <label for="web-link">Website</label>
    <input id="web-link" name="web-link" type="url" placeholder="https://">
    <label for="artist-bio">Bio</label>
    <textarea id="artist-bio" name="artist-bio" type="text" rows="5" maxlength="250" placeholder="Share what you want (Max: 250 characters)"></textarea>
    <hr />
    <label for="allow-collaboration">Allow collaboration?</label>
    <input id="allow-collaboration" name="allow-collaboration" type="checkbox">
    <h5>Checking the box will display your email address on your Creator page. This indicates your interest in collaborating with other Unearth creators.</h5>
    <input type="button" value="Submit" onclick="submitAccountInfo();">
</form>

将数据加载到输入字段和更新字段的相应Jquery:

$(document).ready(function()
{
    setFormValues();
});
function setFormValues()
{
    if("@(!String.IsNullOrWhiteSpace(Model.AccountInfo.ImageURL))" == "True")
    {
        $("#profile-image").attr("src", "@Model.AccountInfo.ImageURL");
    }
    if("@(!String.IsNullOrWhiteSpace(Model.AccountInfo.DisplayName))" == "True")
    {
        $("#display-name").val("@Html.Raw(Model.AccountInfo.DisplayName)");
    }
    if("@(!String.IsNullOrWhiteSpace(Model.AspNetUser.Email))" == "True")
    {
        $("#email").val("@Html.Raw(Model.AspNetUser.Email)");
    }
    if("@(!String.IsNullOrWhiteSpace(Model.AccountInfo.TwitterURL))" == "True")
    {
        $("#twitter-link").val("@Model.AccountInfo.TwitterURL");
    }
    if("@(!String.IsNullOrWhiteSpace(Model.AccountInfo.InstagramURL))" == "True")
    {
            $("#instagram-link").val("@Model.AccountInfo.InstagramURL");
    }
    if("@(!String.IsNullOrWhiteSpace(Model.AccountInfo.YouTubeURL))" == "True")
    {
        $("#youtube-link").val("@Model.AccountInfo.YouTubeURL");
    }
    if("@(!String.IsNullOrWhiteSpace(Model.AccountInfo.WebURL))" == "True")
    {
        $("#web-link").val("@Model.AccountInfo.WebURL");
    }
    if("@(!String.IsNullOrWhiteSpace(Model.AccountInfo.Bio))" == "True")
    {
        $("#artist-bio").html("@Model.AccountInfo.Bio").text();
    }
    if("@(Model.AccountInfo.AllowCollaborationFL.HasValue ? Model.AccountInfo.AllowCollaborationFL.Value : false)" == "True")
    {
        $("#allow-collaboration").prop("checked", true);
    }
}

    function updateAspNetUserEmail()
{
    var aspNetUser = new Object();
    aspNetUser.Email = $("#email").val();
    $.ajax
    ({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        url: "@Url.Content("~/Account/SubmitEmailInfo/")",
        data: JSON.stringify(aspNetUser),
        success: function(data)
        {
            if(data == true)
            {
                location.reload(true);
            }
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            //TODO: Indicate Error
        }
        });
}

function submitAccountInfo()
{
    var accountInfo = new Object();
    accountInfo.ImageURL = $("#profile-image").attr("src");
    accountInfo.DisplayName = $("#display-name").val();
    //accountInfo.Email = $("#email").val();
    accountInfo.TwitterURL = $("#twitter-link").val();
    accountInfo.InstagramURL = $("#instagram-link").val();
    accountInfo.YouTubeURL = $("#youtube-link").val();
    accountInfo.WebURL = $("#web-link").val();
    accountInfo.Bio = $("#artist-bio").val();
    accountInfo.AllowCollaborationFL = $("#allow-collaboration").is(":checked");
    $.ajax
    ({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        url: "@Url.Content("~/Account/SubmitAccountInfo/")",
        data: JSON.stringify(accountInfo),
        success: function(data)
        {
            if(data == true)
            {
                updateAspNetUserEmail();
            }
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            //TODO: Indicate Error
        }
        });
}

最后,这是我的帐户控制器与Jsonsubmits:

public JsonResult SubmitEmailInfo(AspNetUser aspNetUser)
{
    try
    {
        var userID = User.Identity.GetUserId();
        aspNetUser.Id = userID;
        var _aspNetUser = EntityDataAccess.GetAspNetUserByID(userID);
        if (_aspNetUser == null)
        {
            aspNetUser = EntityDataAccess.InsertEmailInfo(aspNetUser);
        }
        else
        {
            aspNetUser.Id = _aspNetUser.Id;
            aspNetUser.EmailConfirmed = _aspNetUser.EmailConfirmed;
            aspNetUser.PasswordHash = _aspNetUser.PasswordHash;
            aspNetUser.SecurityStamp = _aspNetUser.SecurityStamp;
            aspNetUser.PhoneNumber = _aspNetUser.PhoneNumber;
            aspNetUser.PhoneNumberConfirmed = _aspNetUser.PhoneNumberConfirmed;
            aspNetUser.TwoFactorEnabled = _aspNetUser.TwoFactorEnabled;
            aspNetUser.LockoutEnabled = _aspNetUser.LockoutEnabled;
            aspNetUser.LockoutEndDateUtc = _aspNetUser.LockoutEndDateUtc;
            aspNetUser.AccessFailedCount = _aspNetUser.AccessFailedCount;
            aspNetUser.UserName = _aspNetUser.UserName;
            aspNetUser = EntityDataAccess.UpdateEmailInfo(aspNetUser);
        }
        return Json(true);
    }
    catch (Exception ex)
    {
        return Json(ex);
    }
}

public JsonResult SubmitAccountInfo(AccountInfo accountInfo)
{
    try
    {
        var userID = User.Identity.GetUserId();
        accountInfo.UserID = userID;
        var _accountInfo = EntityDataAccess.GetAccountInfoByUserID(userID);
        if(_accountInfo == null)
        {
            accountInfo = EntityDataAccess.InsertAccountInfo(accountInfo);
        }
        else
        {
            accountInfo.AccountInfoID = _accountInfo.AccountInfoID;
            accountInfo.CreatorFL = _accountInfo.CreatorFL;
            accountInfo.NeedsVerificationFL = _accountInfo.NeedsVerificationFL;
            accountInfo.VerifiedFL = _accountInfo.VerifiedFL;
            accountInfo.AdminFL = _accountInfo.AdminFL;
            accountInfo = EntityDataAccess.UpdateAccountInfo(accountInfo);
        }
        var algoliaArtistModel = Tools.BuildAlgoliaArtistModel(accountInfo);
        var artistIndexHelper = HttpContext.Application.Get("ArtistIndexHelper") as IndexHelper<ArtistAlgoliaModel>;
        artistIndexHelper.SaveObjectAsync(algoliaArtistModel);
        var algoliaSongModels = Tools.BuildAlgoliaSongModels(accountInfo);
        var songIndexHelper = HttpContext.Application.Get("SongIndexHelper") as IndexHelper<SongAlgoliaModel>;
        songIndexHelper.SaveObjectsAsync(algoliaSongModels);
        return Json(true);
    }
    catch(Exception ex)
    {
        return Json(ex);
    }
}

2 个答案:

答案 0 :(得分:0)

使用Ajax Toolkit  例如,

activity

答案 1 :(得分:0)

为您拥有的每个输入执行此操作

   <script>
      function escapeHtml(text) {
       return text
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "``")
      .replace(/'/g, "`");
    }
      var displayname = document.getElementById("display-name").value;
      displayname = escapeHtml(displayname);
      /* repeat for every input */
    </script>