Cách thực hiện cuộc gọi ajax trong MVC4

Question

Tôi mới tham gia MVC4. Tôi phải tạo xác nhận tên đăng nhập. Sau khi viết một chuỗi, khi chúng ta thoát khỏi hộp văn bản, nó sẽ hiển thị cho dù nó có sẵn hay không.

The View Code là:

@{ 
    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> 
} 

Bây giờ ở vị trí của alert("a"), tôi sẽ phải gọi một hành động. Hành động đó sẽ chứa kiểm tra cơ sở dữ liệu.

khiển Code:

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(); 
     } 
    } 

Bây giờ câu hỏi của tôi là làm thế nào để gọi SearchUser() hành động này và hiển thị nó vào trang tương tự khi chúng tôi đi ra khỏi TextBox1.

Bất kỳ đề xuất nào vui lòng.

Answer 1

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> 
} 

phương pháp điều khiển

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);    
     } 
    } 
} 

• Tôi muốn giới thiệu cách sử dụng một ORM (Entity Framework hoặc Nhibernate)
• Hãy coi chừng SQL injection ngay cả khi bạn sử dụng quy trình được lưu trữ: http://www.troyhunt.com/2012/12/stored-procedures-and-orms-wont-save.html

Answer 2

Bạn đang phát minh lại bánh xe. MVC cung cấp một giao diện - IClientValidatable - hoàn thành điều này. Hầu như tất cả xác thực biểu mẫu MVC có thể được thực hiện với sự kết hợp thuộc tính thuộc tính (nghĩa là [Bắt buộc] phía máy chủ và phía máy khách với Xác thực không phô trương), IClientValidatable (phía máy khách) và IValidatable (phía máy chủ). Dưới đây là ví dụ xác thực hoàn chỉnh - MVC3 - Custom Client-Side Validation with Unobtrusive Ajax - a Complete Example