如何在MVC4中进行ajax调用

时间:2013-01-09 05:34:25

标签: c# jquery asp.net-mvc-4

我是MVC4的新手。我必须创建一个登录名验证。写完一个字符串后,当我们退出文本框时,它应该显示它是否可用。

查看代码是:

@{
    ViewBag.Title = "Home Page";
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            @Html.TextBox("textbox1")
            @Html.TextBox("txtTest")
        </div>
    </section>
}
@section scripts{
    <script type="text/javascript">
        $(document).ready(function(){
            $('#textbox1').blur(function(){
                alert("a");
            });
        });
    </script>
}

现在取代alert("a"),我将不得不召集一个动作。该操作将包含数据库检查。

控制器代码:

public class HomeController : Controller
    {
        public ActionResult Index()
    {
        ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

        return View();
    }
        public ActionResult SearchUser()
        {
            string ExistsCheck;
            SqlConnection con = new SqlConnection(ConfigurationManager.AppSettings["conn"].ToString());
            SqlDataAdapter da = new SqlDataAdapter();
            SqlCommand cmd = new SqlCommand();
            DataTable dt = new DataTable();
            cmd = new SqlCommand("sp_UserName_Exist_tbl_UserDetails", con);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@UserName", Request.Form["textbox1"]);
            da.SelectCommand = cmd;
            da.Fill(dt);
            if (dt != null && dt.Rows.Count > 0 && dt.Rows[0][0].ToString().ToLower() == "exists")
            {
                ExistsCheck = "Exists";
            }
            else
            {
                ExistsCheck = "Available";
            }
            return View();
        }
    }

现在我的问题是如何调用此SearchUser()操作,并在我们从textbox1中退出时将其显示在同一页面中。

请提出任何建议。

2 个答案:

答案 0 :(得分:6)

<强>的JavaScript

@{
    ViewBag.Title = "Home Page";
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <table>
                <tr>
                    <td>
                        @Html.TextBox("textbox1")
                    </td>
                    <td>
                        <div id="regTitle"></div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        @Html.TextBox("txtTest")
                    </td>
                </tr>
            </table>
        </div>

    </section>
}
@section scripts{
<script type="text/javascript">
    $(document).ready(function () {
        $('#textbox1').blur(function () {
            var params = { userName: $(this).val() };
            $.ajax({
                url: "Home/SearchUser",
                type: "get",
                data: { userName: $("#textbox1").val() },
                success: function (response, textStatus, jqXHR) {
                    if (response.IsExisting) {
                        // User name is existing already, you can display a message to the user
                        $("#regTitle").html("Already Exists")
                    }
                    else {
                        // User name is not existing
                        $("#regTitle").html("Available")
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("error");
                },
                // callback handler that will be called on completion
                // which means, either on success or error
                complete: function () {
                    }
            });
        });
    });
</script>
}

控制器方法

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Mvc4_Ajax.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
        [HttpGet]
        public ActionResult SearchUser(string userName)
        {
            SqlConnection con = new SqlConnection(ConfigurationManager.AppSettings["conn"].ToString());
            SqlDataAdapter da = new SqlDataAdapter();
            SqlCommand cmd = new SqlCommand();
            DataTable dt = new DataTable();
            cmd = new SqlCommand("sp_UserName_Exist_tbl_UserDetails", con);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@UserName", userName);
            da.SelectCommand = cmd;
            da.Fill(dt);
            var isExisting = dt != null && dt.Rows.Count > 0 && dt.Rows[0][0].ToString().ToLower() == "exists";
            return Json(new { IsExisting = isExisting }, JsonRequestBehavior.AllowGet);            
        }
    }
}

答案 1 :(得分:2)

你正在重新发明轮子。 MVC提供了一个接口 - IClientValidatable - 完成了这一点。几乎所有的MVC表单验证都可以通过属性属性(即[必需]服务器端和客户端与不显眼验证),IClientValidatable(客户端)和IValidatable(服务器端)的组合来完成。这是一个完整的验证示例 - MVC3 - Custom Client-Side Validation with Unobtrusive Ajax - a Complete Example