Pourquoi Ajax.BeginForm ne fonctionne pas correctement

en essayant d'ajouter un formulaire sur mon site, alors quand les utilisateurs cliquent sur le bouton, il devrait apparaître un petit message là-bas en tant que loadingElementId. Confirmer également ne fonctionne pas et je n'ai aucune idée pourquoi. J'utilise Chrome Browser.Pourquoi Ajax.BeginForm ne fonctionne pas correctement

Voici le code:

@model HaveYouSeenMe.Models.MessageModel 

@{ 
    ViewBag.Title = "Send"; 
} 

<div id="messageForm"> 

    <h2>Send Message</h2> 

    @using (Ajax.BeginForm(new AjaxOptions 
    { 
     Confirm = "Are you sure?", 
     HttpMethod = "Post", 
     InsertionMode = InsertionMode.Replace, 
     LoadingElementId = "loading", 
     UpdateTargetId = "messageForm" 
    })) 
    { 
     @Html.AntiForgeryToken() 
     @Html.ValidationSummary(true) 

     <fieldset> 
      <legend>Message Model</legend> 

      <div class="editor-label"> 
       @Html.LabelFor(model => model.From) 
      </div> 
      <div class="editor-field"> 
       @Html.EditorFor(model => model.From) 
       @Html.ValidationMessageFor(model => model.From) 
      </div> 

      <div class="editor-label"> 
       @Html.LabelFor(model => model.Email) 
      </div> 
      <div class="editor-field"> 
       @Html.EditorFor(model => model.Email) 
       @Html.ValidationMessageFor(model => model.Email) 
      </div> 

      <div class="editor-label"> 
       @Html.LabelFor(model => model.Subject) 
      </div> 
      <div class="editor-field"> 
       @Html.EditorFor(model => model.Subject) 
       @Html.ValidationMessageFor(model => model.Subject) 
      </div> 

      <div class="editor-label"> 
       @Html.LabelFor(model => model.Message) 
      </div> 
      <div class="editor-field"> 
       @Html.EditorFor(model => model.Message) 
       @Html.ValidationMessageFor(model => model.Message) 
      </div> 

      <p> 
       <input type="submit" value="Send Message" /> 
      </p> 
     </fieldset> 
    } 
</div> 

<div id="loading" style="display: none"> 
    Sending message... 
</div> 

@section Scripts{ 
    @Scripts.Render("~/bundles/jqueryval") 
}

Source

2017-02-08 Ertan Hasani

Voici comment vous le faites:

Controller:

public class MessageModel 
{ 
    public string From { get; set; } 
    public string Email { get; set; } 
    public string Subject { get; set; } 
    public string Message { get; set; } 
} 

public class HomeController : Controller 
{ 
    [HttpPost] 
    public string ProcessForm(MessageModel messageModel) 
    { 
     Thread.Sleep(15000); 
     return "<h2>Customer updated successfully!</h2>"; 
    } 

    public ActionResult Index20() 
    { 
     MessageModel messageModel = new MessageModel { Email = "email", From = "from", Message = "message", Subject = "subject" }; 
     return View(messageModel); 
    }

Vue:

@model Testy20161006.Controllers.MessageModel 

@{ 
    ViewBag.Title = "Send"; 
} 

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index20</title> 
    <script src="~/Scripts/jquery-1.12.4.min.js"></script> 
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 
    <script type="text/javascript"> 
     function OnBegin() { 
      $("#divMsg").append("<h3>Beginning Ajax request.</h3>"); 
     } 
     function OnComplete() { 
      $("#divMsg").append("<h3>Completing Ajax request.</h3>"); 
     } 
     function OnSuccess() { 
      $("#divMsg").append("<h3>Ajax request successful.</h3>"); 
     } 
     function OnFailure() { 
      $("#divMsg").append("<h3>Ajax request failed.</h3>"); 
     } 
     $(function() { 


      $("#divProgress").css("display","none"); 
     }) 
    </script> 
</head> 
<body> 
    <div id="messageForm"> 

     <h2>Send Message</h2> 

     @{AjaxOptions options = new AjaxOptions(); 
      options.HttpMethod = "POST"; 
      options.Confirm = "Do you wish to submit this form?"; 
      options.OnBegin = "OnBegin"; 
      options.OnComplete = "OnComplete"; 
      options.OnFailure = "OnFailure"; 
      options.OnSuccess = "OnSuccess"; 
      options.LoadingElementId = "divProgress"; 
      options.LoadingElementDuration = 1000; 
      options.UpdateTargetId = "divResponse"; 
      options.InsertionMode = InsertionMode.InsertAfter; 

      } 

     @using (Ajax.BeginForm("ProcessForm", "Home", options)) 
     { 
      @Html.AntiForgeryToken() 
      @Html.ValidationSummary(true) 

      <fieldset> 
       <legend>Message Model</legend> 

       <div class="editor-label"> 
        @Html.LabelFor(model => model.From) 
       </div> 
       <div class="editor-field"> 
        @Html.EditorFor(model => model.From) 
        @Html.ValidationMessageFor(model => model.From) 
       </div> 

       <div class="editor-label"> 
        @Html.LabelFor(model => model.Email) 
       </div> 
       <div class="editor-field"> 
        @Html.EditorFor(model => model.Email) 
        @Html.ValidationMessageFor(model => model.Email) 
       </div> 

       <div class="editor-label"> 
        @Html.LabelFor(model => model.Subject) 
       </div> 
       <div class="editor-field"> 
        @Html.EditorFor(model => model.Subject) 
        @Html.ValidationMessageFor(model => model.Subject) 
       </div> 

       <div class="editor-label"> 
        @Html.LabelFor(model => model.Message) 
       </div> 
       <div class="editor-field"> 
        @Html.EditorFor(model => model.Message) 
        @Html.ValidationMessageFor(model => model.Message) 
       </div> 

       <p> 
        <input type="submit" value="Send Message" /> 
       </p> 
      </fieldset> 
     } 
    </div> 

    <br /> 
    <br /> 
    <div id="divProgress"> 
     @*<img src='<%= Url.Content("~/images/ProgressCircle.gif") %>' />*@ 
     <img src="~/Images/untitled.png" /> 
    </div> 
    <div id="divResponse"></div> 
    <div id="divMsg"></div> 

    @*<img id="loading" src="~/Images/untitled.png" style="display: none" />*@ 
</body> 
</html>

Le crédit va à http://www.codeguru.com/csharp/.net/working-with-ajax-helper-in-asp.net-mvc.htm

Source

2017-02-08 23:47:04 kblau

Pourquoi Ajax.BeginForm ne fonctionne pas correctement

Répondre

Questions connexes