CODEWITHSUNDEEP
asp.net-mvcmodel-view-controller
gutsmania
gutsmania

Reputation: 312

MVC controls not working properly without page refresh

I've got an MVC controller that can be called via form submission in a couple different places. The controller then renders a view whose primary purpose is to allow the user to send the document or post it to an external site, as well as fill in text fields that will be used in the notification email.

I am performing validation on these fields - the user can enter custom subject/body text. If they do not, they will receive a popup alert and can either return to the form or submit it using default text indicated in the placeholder value.

The problem is that when the user first reaches this page and clicks the send button, no input in the textboxes is actually registering and it gives the empty string notification regardless of what is actually in the fields; however, if I hit F5 and try again, the input works perfectly.

I feel like this has something to do with the form submissions that initially call this controller being done via POST action, whereas it seems to work fine with the GET on page refresh. I just can't figure out how to either get the content to respond properly when the controller is called via POST, or how to submit the form without posting the data.

Thanks in advance for reading and any help.

Here is the calling controller:

    public ActionResult Index(FormCollection collection)
    {
        //modelbuilding code
        return View (Model);
    }

The code that calls the controller always uses this format: (in this case, it would be called from the Recipients/Index view.

@using(Html.BeginForm("Index", "Distribution", FormMethod.Post )) {
    //form values
    <input type="submit" data-role="button" value="Done"/>
}

Here is the relevant part of the view and the JS validation function:

<div id="SubjectTemplate">
    <p>Subject: <input id="emailSubjectTextBox" name="EmailSubject" placeholder="@EmailSubject" /></p>
</div>

<a href="javascript:validateInput();">Send Notification</a>

<script>               
    function validateInput() {
         var possibleErrors = [];   
         if (!(document.getElementById('emailSubjectTextBox').value)) {
               possibleErrors.push('@incompleteEmailSubject' + '\n');
         }
         //more validation that works the same way and has the same problem
         if (possibleErrors.length > 0) {
             if (confirm(possibleErrors))
             {
               window.location.href = '@Url.Action("Send")'
             }
         }
         else {
               window.location.href = '@Url.Action("Send")'
         }
    }                
</script>

Upvotes: 2

Views: 1164

Answers (2)

gutsmania
gutsmania

Reputation: 312

I found the problem resulted from jQueryMobile automatically utilizing AJAX to post forms. I solved this by including new {data_ajax = "false"} to the Html.BeginForm statements.

Upvotes: 0

beyond-code
beyond-code

Reputation: 1422

I'm not sure I fully understand your question, but generally speaking you should not use the same action for POST and GET.

Even more importantly, you should not be using POST if your action does not have some kind of side effect. If all you are doing with your form submission is making some kind of choice then you should be using GET.

See the following post for more information and examples of how to perform ajax GET requests using jQuery: http://www.jquery4u.com/ajax/key-differences-post/

Regardless of what you are trying to do, it is very good practice that POST calls perform some action, and then redirect to a GET action which returns to the user.

[HttpPost]
public ActionResult Index(FormCollection collection)
{
    //do whatever you need to save the record
    return RedirectToAction("Index")
}

[HttpGet]
public ActionResult Index()
{
    //modelbuilding code
    return View (Model);
}

Not only does this help your controller adhere to a RESTful methodology, it also stops the user getting that annoying 'Are you sure you want to resubmit this page' if they happen to press f5

Hope this helps.

Upvotes: 1

Related Questions