ASP.NET MVC ViewUserControl in edit mode doesn`t work if a add a button

Question

Hy, I have the following ViewUserControl:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<table>
<tr>
   <td><%= Html.TextBox("") %></td>
   <td><button type="button" id="workType-open-button" class="t-button" onclick="modalWin('http://localhost:29357/WorkType/SelectForTR')">Select</button></td>
</tr>
</table>

<script type="text/javascript">
function modalWin(url) {
    if (window.showModalDialog) {
        window.showModalDialog(url, "Select work type", "dialogWidth:700px;dialogHeight:450px");
    }
    else {
        window.open(url, 'Select work type', 'height=700,width=450,toolbar=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no ,modal=yes');
    }
} 
</script>

I use this to edit the next property of a class:

[UIHint("WorkTypes"), Required]
public int WorkType { get; set; }

In the UserControl i have the following code:

[HttpPost]
[GridAction]
    public ActionResult InsertTimeRegistration()
    {
        TimeRegistrationViewModel newT = new TimeRegistrationViewModel();

        if (TryUpdateModel(newT))
        {
            //The model is valid - insert the time registration.
            newT.Employee = 6;
            repo.AddTimeRegistration(newT);
        }


        return View(new GridModel(repo.GetAllTimeRegistrationOfAnEmployee(6)));
    }

The problem is that if i remove the button from the control it is work ok, but with button it don`t update the model. The parameter of the POST have the value inserted in the edit form, but the record isn't saved to db.

Please give me an advice if you can.

Thanks

Answer 1

The reason this doesn't work is because your InsertTimeRegistration is accessible only with the POST HTTP verb. The way you are calling it in javascript is with either window.open or window.showModalDialog which I suppose both send a GET request (I am sure for the window.open ).

So you need to configure your window.showModalDialog function to send a POST request. Here's an example of how you could post an HTML <form> using AJAX:

var formToPost = $('#idofyourform');
$.ajax({
    url: formToPost.attr('action'),
    type: 'POST',
    data: formToPost.serialize(),
    success: function(result) {
        alert('form successfully submitted');
    }
});