Comment remplir automatiquement les données du modèle

Question

J'ai un modèle de connexion avec nom d'utilisateur, mot de passe et code. Maintenant, je veux que vous remplissiez le code puis automatiquement le nom d'utilisateur et le mot de passe doivent être remplis. Par exemple, vous remplissez le code: HD puis TAB, puis les champs de texte pour le nom d'utilisateur et mot de passe doivent été remplie

la méthode d'action ressemble à ceci:.

[HttpPost] 
     public ActionResult LoginBalieUser(V_LoginModel_BalieUser model) 
     { 

      ISalesPersonProfile salesAgent99 = CommerceFrameworkBase.SalesPersons.GetSalesPerson("HD");   
      var salesAgent = CommerceFramework.ShopAccounts.GetShopAccount(Guid.Parse("3E90BB13-36BA-435D-8ED7-E930A4F8C758"), true);   

      if (model.BalieCode == salesAgent99.Id) 
      { 
        if (!ModelState.IsValid) 
         return View(model); 

       if (!ShopApi.UserState.Login(model.UserName, model.Password, model.RememberMe)) 
       { 
        ModelState.AddModelError("","The username or password is incorrect"); 
        return View(model); 
       } 

      } 



      return RedirectToAction("Index", "Profile"); 
     } 

le modèle étendu ressemble à ceci:

public class V_LoginModel_BalieUser : LoginModel 
    { 

     public string BalieCode { get; set; } 
} 

et le ou modèle iginal ressemble à ceci:

// 
    // Summary: 
    //  A model to login into the webshop. 
    public class LoginModel 
    { 
     public LoginModel(); 

     // 
     // Summary: 
     //  Gets or sets the password. 
     [AllowHtml] 
     [DataType(DataType.Password)] 
     [Display(Name = "Password")] 
     [Required(ErrorMessageResourceName = "Validation_RequiredField")] 
     [StringLength(30, ErrorMessageResourceName = "Validation_MaxLengthExceeded")] 
     public virtual System.String Password { get; set; } 
     // 
     // Summary: 
     //  Gets or sets a value indicating whether to remember the user to login him automatically 
     //  on the next visit. 
     [Display(Name = "Login_RememberMe")] 
     public virtual System.Boolean RememberMe { get; set; } 
     // 
     // Summary: 
     //  Gets or sets the username. 
     [DataType(DataType.EmailAddress, ErrorMessageResourceName = "Validation_InvalidField")] 
     [Display(Name = "EmailAddress")] 
     [Required(ErrorMessageResourceName = "Validation_RequiredField")] 
     [StringLength(80, ErrorMessageResourceName = "Validation_MaxLengthExceeded")] 
     [TrimAttribute(new[] { })] 
     public virtual System.String UserName { get; set; } 
    } 

et la vue ressemble à ceci:

@{ 

    Layout = LayoutPaths.General; 
} 

@model Sana.Commerce.DomainModel.Account.V_LoginModel_BalieUser 


<div class="semicolumn"> 
    <div class="form-holder"> 
     @using (Html.BeginForm(htmlAttributes: new { @class = "form" })) 
     { 
      @Html.AntiForgeryToken() 

      <table> 
       <tr> 
        <th> 
         @Html.DisplayNameFor(modelItem => modelItem.BalieCode) 
        </th> 
        <th></th> 
       </tr> 

       <tr> 
        <td> 
         @Html.TextBoxFor(modelItem => modelItem.BalieCode) 
        </td> 

       </tr> 



       <tr> 
        <th> 
         @Html.DisplayNameFor(modelItem => modelItem.UserName) 
        </th> 
        <th></th> 
       </tr> 

       <tr> 
        <td> 
         @Html.TextBoxFor(modelItem => modelItem.UserName) 
        </td> 

       </tr> 


       <tr> 
        <th> 
         @Html.DisplayNameFor(modelItem => modelItem.Password) 
        </th> 
        <th></th> 
       </tr> 

       <tr> 
        <td> 
         @Html.TextBoxFor(modelItem => modelItem.Password) 
        </td> 

       </tr> 


      </table> 
      <div class="form-row"> 
       <h4></h4> 
       <input type="submit" value="Login" /> 
      </div> 
     } 
    </div> 
    <div> 

    </div> 
</div> 

@section Scripts{ 
    <script src="~/Scripts/jquery-1.10.2.min.js"></script> 
    <script> 


     $(document).ready(function(){ 
      $("#Id").change(function() { 
       $.ajax({ 
        type: "Get", 
        url: '@Url.Action("loginbalieUser", "profile")', 
        data: { id: $("").val() }, 
        dataType: "json", 
        success: function (data) { 
         $("#UserName").val(data[0]); 
         $("#Password").val(data[1]); 
        } 
       }); 
      }) 


     }); 
    </script>  

    } 

donc j'ai essayé avec un appel Ajax. Mais la mise en œuvre exacte je ne sais pas.

Merci

c'est le modèle de: ISalesPersonProfile

// 
    // Summary: 
    //  Interface for the Sales Person Profile entity. 
    public interface ISalesPersonProfile : IEntity 
    { 
     // 
     // Summary: 
     //  Email of this Sales person. 
     string Email { get; set; } 
     // 
     // Summary: 
     //  Sales person's code. 
     string Id { get; set; } 
     // 
     // Summary: 
     //  Job Title of the Sales person. 
     string JobTitle { get; set; } 
     // 
     // Summary: 
     //  Name of the Sales person. 
     string Name { get; set; } 
     // 
     // Summary: 
     //  Phone number of the Sales person. 
     string Phone { get; set; } 
     // 
     // Summary: 
     //  Gets or sets the related customer id list related with the sales person. 
     IList<string> RelatedCustomerIds { get; set; } 
    } 

Mais je reçois cette erreur:

loginbalieUser:232 Uncaught ReferenceError: ValidateBalieCode is not defined 
    at HTMLInputElement.onchange (loginbalieUser:232) on this line: <tr> 
        <td> 
         @Html.TextBoxFor(modelItem => modelItem.BalieCode, new { @onchange = "ValidateBalieCode()" }) 
        </td> 

       </tr> 

et voici mon appel ajax:

function ValidateBalieCode(){ 
       var code = $('input#BalieCode').val(); 

        $.ajax({ 
        type: "Get", 
        url: '@Url.Action("ValidateBalieCode", "profile")', 
        data: { "BalieCode":code }, 
        success: function (data) { 

         $("input#UserName").val(data.UserName); 
         $("input#Password").val(data.Password); 
        } 
       }); 


      } 

si je loa d la page en chrome Goog:

Je vois ceci:

function ValidateBalieCode(){ 
       var code = $('input#BalieCode').val(); 

        $.ajax({ 
        type: "Get", 
        url: '/sitemap.xml', 
        data: { "BalieCode":code }, 
        success: function (data) { 

         $("input#UserName").val(data.UserName); 
         $("input#Password").val(data.Password); 
        } 
       }); 


      } 

Oke,

Je l'ai maintenant comme ceci:

function ValidateBalieCode() { 
       var code = $('input#BalieCode').val(); 

       $.ajax({ 
        async: true, 
        type: "Get", 
        url: "/profile/ValidateBalieCode/", 
        contentType: "application/json; charset=utf-8", 
        data: { "BalieCode": code }, 
        success: function (data) { 

         $("input#UserName").val(data.UserName); 
         $("input#Password").val(data.Password); 
        } 
       }); 


      } 

mais l'URL est comme ceci:

http://localhost:5923/en-us/profile/loginbalieuser 

donc toujours: nous. mais si je fais ceci:

url: "en-us/profile/ValidateBalieCode/", 

puis en chrome Je vois ceci:

http://localhost:5923/en-us/profile/en-us/profile/ValidateBalieCode/?BalieCode=1 404 (Not Found) 

Answer 1

Vous devez avoir une méthode d'action distincte pour obtenir UserName et Password contre BalieCode.

---

Demo

---

Vue:

@using (Html.BeginForm("LoginBalieUser", "LogIn", FormMethod.Post, new { @class = "form" })) 
     { 
      @Html.AntiForgeryToken() 

      <table> 
       <tr> 
        <th> 
         @Html.DisplayNameFor(modelItem => modelItem.BalieCode) 
        </th> 
        <th></th> 
       </tr> 

       <tr> 
        <td> 
         @Html.TextBoxFor(modelItem => modelItem.BalieCode, new { @onchange = "ValidateBalieCode()" }) 
        </td> 

       </tr> 



       <tr> 
        <th> 
         @Html.DisplayNameFor(modelItem => modelItem.UserName) 
        </th> 
        <th></th> 
       </tr> 

       <tr> 
        <td> 
         @Html.TextBoxFor(modelItem => modelItem.UserName) 
        </td> 

       </tr> 


       <tr> 
        <th> 
         @Html.DisplayNameFor(modelItem => modelItem.Password) 
        </th> 
        <th></th> 
       </tr> 

       <tr> 
        <td> 
         @Html.PasswordFor(modelItem => modelItem.Password) 
        </td> 

       </tr> 


      </table> 
      <div class="form-row"> 
       <h4></h4> 
       <input type="submit" value="Login" /> 
      </div> 
     } 

Controller:

public class HomeController : Controller 
{ 
    [HttpGet] 
    public ActionResult Index() 
    { 
     return View(new SampleViewModel()); 
    } 


    public JsonResult ValidateBalieCode(string BalieCode) 
    { 
     string strUserName = string.Empty; 
     string strPassword = string.Empty; 

     List<SampleViewModel> _db = new List<SampleViewModel>();   
     _db.Add(new SampleViewModel() { BalieCode = "1", UserName = "test1", Password = "test1" }); 
     _db.Add(new SampleViewModel() { BalieCode = "2", UserName = "Test2", Password = "test2" }); 


     var SampleViewModel = _db.Find(x => x.BalieCode == BalieCode); 
     if(SampleViewModel != null) 
     { 
      strUserName = SampleViewModel.UserName; 
      strPassword = SampleViewModel.Password; 
     } 

     return Json(new{ UserName = strUserName, Password = strPassword }, JsonRequestBehavior.AllowGet); 
    } 
} 

Script

<script type="text/javascript"> 

     function ValidateBalieCode(){ 
       var code = $('input#BalieCode').val(); 

        $.ajax({ 
        type: "Get", 
        url: '@Url.Action("ValidateBalieCode", "Home")', 
        data: { "BalieCode":code }, 
        success: function (data) { 

         $("input#UserName").val(data.UserName); 
         $("input#Password").val(data.Password); 
        } 
       }); 


      } 

     </script>