2

I've spent plenty of time in understanding how to use modal popup but I've not found any good answer yet or I should state Full working code.

I'm looking for an approach which uses MVC HTTPGET, HTTPPOST methods and In Javascript or Ajax should not have hardcoded property names

Here is what I'm able to achieve till now:
enter image description here

I'm fairly new to AJAX, JQUERY

Main Error: I'm not able to properly use SAVE button here i.e. HTTPPOST action is not called in Internet Explorer and Chrome , though that works in Firefox

  1. Approach based on this link but it did not workout in Internet Explorer. Issue: HTTPPOST action does not call in Internet Explorer or Chrome
  2. Tried to follow his complete article but Did not like the way JSON is used and validation is performed.
  3. Jquery UI modal form: Want to use feature like this but no idea how to use ASP.net MVC4 HTTP GEt And HTTP POST in this.
  4. Tried this demo too but :(
  5. This one was good, tried to implement by using his complete source code but still could not able to work
  6. ASP.net MVC Modal Had too much hope from this one. Downloaded, tried to implement everything after 2-3 hours realized even this one is not "Ready to use" as it states. More information about it
  7. Code project: Comparison of three jquery modal Though it was in ASPX but still tried to implement. (Did not work out :()

Tried couple of other solutions, each one having its own issues. May be some of these posts are old and jquery version have obsoleted few control.

This feature is pretty much used and discussed so if someone has working code then please share.

CODE Here is my complete code: http://pastebin.com/yNH7CFTS

ERROR HINT I'm not sure if this is the problem but in Internet Explorer when I press Save button then dialog closes which calling HTTPPost action and the url in browser is :

http://localhost:53381/Project/Details/1?ProjectId=1&Effort=0&Cost=56

Where values 1 ,0 ,56 are what I enter in textboxes

Anyone can please post a complete answer for MODAL / POPUP in asp.net MVC with RESTFUL methods.

Improve this question
3
  • Where's your code? I would recommend debugging your http posts with fiddler2. Commented Jul 3, 2013 at 22:32
  • updated question with link to pastebin Commented Jul 3, 2013 at 22:34
  • Thanks Biff MaGriff for suggesting Fiddler2. Realized my mistake. Will post the solution soon. Commented Jul 4, 2013 at 6:28

3 Answers 3

Reset to default
0

Use the $.post jquery method to call your httppost controller actions like this:

$.post(
    "addressofaction",
        {}).done(function () {
            alert("do something"
            })
        }).fail(function () {
            alert("error");
        })
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Would be great if you can have a look to code I added in pastebin and suggest answer accordingly.
0

I couldn't test it, I just simplified as much as possible the code that I've written before for a web app with a lot of customizations.

View

@using (Html.BeginForm("PostAction", "A" , FormMethod.Post ,new { @class = "modal-form", id = "asd" }))
{
<div class="modal-header">Header</div>
<div class="modal-body">
.........
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button type="submit" class="btn btn-success">Save</button>
}

Let's say it AController

[HttpPost]
public JsonResult PostAction(PostModel model)
{
    return Json(true);
}

and jQuery with latest version

$(document).on("submit", 'form.modal-form', function (e)
{
   e.preventDefault();
   var form = $(this);
   $.ajax({
                url:form.attr("action"),
                type:"POST",
                data:form.serialize(),
                contentType:"application/json; charset=utf-8",
                success: function(result){
                    if (result) {
                           //Returns true
                    }
                    else {
                        //Returns false
                    }
                }
            });
}
Improve this answer

1 Comment

Tried but I don't think I'm able to get it in working situation.
0

Finally found that issue was not with the approach but was with placement of "DialogDiv" code.

The approach suggested at What's the best way to call a modal dialog in ASP.NET MVC using Twitter Bootstrap? is definitely neat and good approach for this. Here is what I was doing wrong.

I had written this within "index.cshtml" 

<!-- Estimated Effort Region -->
   <div class="span5">
      <h4>
              Estimated Effort
        <!-- Open  Bootstrap Modal using this link -->
         @Html.ActionLink("Create", "Create", null, null, 
              new { id = "btnCreate", @class = "btn" })
        <div id='dialogDiv' class='modal hide fade in'>
            <div id='dialogContent'></div>
       </div>
      </h4>                   

     <!-- Table on project details page -->
     <table class="table">
          <!-- Stuff related to displaying table -->
     </table>
  </div>

However, the Modal dialog div should not be with-in the index view code. i.e. This should be totally outside of Index view code.

It won't be reproducible in the code suggested at Best approach for Modal as that involves very basic code.

<div id='dialogDiv' class='modal hide fade in'>
    <div id='dialogContent'></div>
</div>

Might help someone.

Improve this answer

1 Comment

So where did you put the modal dialog then? I am trying to do a modal with Bootstrap 3 and ASP MVC4, and I just have so much hard time to reproduce it, though learning ASP at same time doesn't help... is your code in the pastebin up to date with your last modifications?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.