ASP MVC form for invoking a specific action, not a redirect, but updating the original page

Question

I use ASP.net MVC 3 for the project, and now I understand it more, but also try to understand the differences between it and the world of WebForms, which I have used for so long. Earlier in WebForms, you simply placed the fields there, added a button and created an event, and then processed everything you need with a postback.

For example, I have a simple view that shows error details. I want to push some information about this error to our problem tracking API. Allows you to say only the topic and content of the error. I would do something like this in HTML:

<form action="@Url.Action("Send")" method="post"> <input id="subject" name="subject" type="text" value="@Model.subject" /> <br /> <input id="content" name="content" type="text" value="@Model.content" /> <br /> <input type="submit" value="Send" /> </form> 

I found that naming my input identifier to match parameter names in my controller will allow me to pass these parameters. This is similar to what you see in this older post by Scott Guthrie .

First of all, I want to call the "Submit" action in my error controller, and not in my verbose one. This really calls my "Send" action , but then redirects to localhost / Errors / Send, which I don't want.

I want to be able to submit this form, what calls and actions, as well as working with the remote API, and then update the message on the current page stating that the error was transferred.

Once the problem has been sent to the error tracker, how then, for example, will I show a DIV on the original page that passes the content back to it (for example, a link to the problem in the problem tracker)?

Update: Here is what I do in my controller:

 HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create("http://localhost/redmine/issues.json"); request.Credentials = new NetworkCredential("username", "password"); request.Method = "POST"; request.ContentType = "application/json"; request.Accept = "application/json"; using (StreamWriter writer = new StreamWriter(request.GetRequestStream())) { writer.Write("'issue': { " + "'project_id': 'project', " + "'subject': 'Test issue'" + "}"); } WebResponse response = request.GetResponse(); Stream stream = response.GetResponseStream(); string json = ""; using (StreamReader reader = new StreamReader(stream)) { json = reader.ReadToEnd(); } 

Also, here is what I do in my opinion (simplified after using Phillip)

 @model webapp.Models.app_errors <script type="text/javascript"> function SendErrors() { alert(@Model); // here I get a 'webapp undefined error' alert(Model); // Model is undefined. If I reference @Model.App_name or another value anywhere, works fine in rest of view $.ajax({ type: 'POST', //(probably) url: '../SendToRedmine', cache: false, //(probably) dataType: 'json', //(probably) data: @Model, success: function(result) { alert("The error has been transferred"); //you can also update your divs here with the `result` object, which contains whatever your method returns } }); } </script> <input type="button" onclick='SendErrors()'/> 

Answer 1

In response to your first question, try this Url.Action overload:

 Url.Action("ActionName","ControllerName") 

And your second question: you will want to do this through AJAX.

Basically, the first time the page loads, return everything you want to display on the screen. Then we have an ajax function of this form:

 <script type="text/javascript"> function SendErrorsOrWhatever() { dummy = 'error: myError, someOtherProperty = property'; //this of course assumes that 'myError' and 'property' exist $.ajax({ type: 'GET', //i changed this because it actually probably better suits the nature of your request url: '../Details/Send', cache: false, //(probably) dataType: 'json', //(probably) data: dummy, //json object with any data you might want to use success: function(result) { alert("The error has been transferred"); //you can also update your divs here with the `result` object, which contains whatever your method returns } }); } </script> 

A few notes: 1) A URL is automatically added to include data from data . 2) Now your action method should accept a parameter. There are many ways around this. I added an example of how your action method might look in the code below.

and then your onclick button will call this function, for example:

 <input type="button" onclick='SendErrorsOrWhatever()'/> 

What happens is that when you click the Ajax button, it will delete your action method asynchronously (by default), and your action method will do everything it needs with errors, and then when it is completed, the success will be deleted .

EDIT: now your action might look something like this:

 [AcceptVerbs(HTTP.Get)] public static Error GetErrors(Error error) { //do all your processing stuff } 

Now this assumes that the JSon dummy object has the same fields as the Error class. If so, MVC will automatically bind data to it. You can also use a more general FormCollection for the parameter. Indeed, you can use whatever you want, but you want to wrap whatever you want in a JSon object.

Edit - for your last question this should work:

Add the following extension method to the application:

 public static class JsonExtensions { public static string ToJson(this Object obj) { return new JavaScriptSerializer().Serialize(obj); } } 

Or, if you want, you can simply add the ToJson () method to your model class, and then:

 var model = @Model.ToJson(); 

in js right before the ajax call. Then use the model variable for your data parameter.

Answer 2

In MVC, an “action” is essentially a “page”. (not really, but with routing, this ultimately is mostly)

That is, your actions are grouped into categories and switched to using routing within the framework of MVC.

I think what you want to do is to make an AJAX call that will send your error message to the web service.

Other than this, you can use jQuery to insert a hidden div that contains an IFrame , with a different action page on it. I would not recommend it.

Answer 3

There are two possibilities.

• In the action, Errors / Send redirects the user to the localhost / Errors / Details page. This can be done using the Redirect() method on the controller. The problem with this approach is the blocking call. And the user will have to wait until the remote api is called and responds.

• Use the AJAX approach as noted in the comments. The disadvantage is that it is a little more complicated, and you may have to interview the service to get status, unless it is a fire and do not forget to call and then money.

Using AJAX is a more elegant solution.

Answer 4

Using AJAX would be one solution to this. But you can rethink the behevior page. If this is your release question page, you want to stay on this page after submitting the question. What if I continue to post questions, do you want to see the link only for the latter? You may need to poll the server to get a link to the problem presented, which makes it even more difficult.

Not knowing the requirements, it’s not easy to come up with a solution, but as a rule, I went to another page of the problem after sending from the send page (something like ~ / issue / id).

Alternatively, you can use Html.TextboxFor(m=>m.subject) or some syntax like this, so you won’t need to manually enter the input identifier for each property.