Come effettuare una chiamata Ajax in MVC4

Question

Sono nuovo su MVC4. Devo creare una convalida del nome di accesso. Dopo aver scritto una stringa, quando usciamo dalla casella di testo, dovrebbe mostrare se è disponibile o meno.

Il Codice di vista è:

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

Ora al posto di alert("a"), dovrò chiamare un'azione. Quell'azione conterrà il controllo del database.

Codice Controller:

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

Ora la mia domanda è come chiamare questo SearchUser() azione e visualizzare nella stessa pagina quando usciamo dal textbox1.

Qualsiasi suggerimento, per favore.

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

metodo controller

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

• Ti consiglio di utilizzare un ORM (Entity Framework o NHibernate)
• Attenzione SQL injection anche se sei utilizzando una stored procedure: http://www.troyhunt.com/2012/12/stored-procedures-and-orms-wont-save.html

Answer 2

Si sta reinventando la ruota. MVC fornisce un'interfaccia - IClientValidatable - che realizza proprio questo. Quasi tutte le convalide dei moduli MVC possono essere eseguite con una combinazione di attributi di proprietà (cioè [Richiesto] lato server e lato client con Convalida non intrusiva), IClientValidatable (lato client) e IValidatable (lato server). Ecco un esempio di convalida completo: MVC3 - Custom Client-Side Validation with Unobtrusive Ajax - a Complete Example