DIV update using .NET 4 MVC 3 and jQuery

Question

I am using .NET 4, MVC 3, and jQuery to create a diagnostic page. This page will allow users to manually run tests on our system, invoking various web services. I want to have 3 forms for viewing for three separate tests. Each form submission should return a value asynchronously so that they can only send two tests, and then see the return values ​​of the tests without refreshing the page.

In my PHP days, I would set up an Ajax call for each form, and then hit the server side of the script to do the work and return the value, but it's hard, conceptually, to translate this to an MVC solution. I would appreciate if someone would provide some sample code on how to do this and where each piece of code should go (Views, Controllers, Partial Views, etc.)

It seems so simple, but I just can't wrap myself around it today.

Thanks in advance...

EDIT

Eric Sowell delivered an excellent lesson teaching the best practices of MVC 3 and jQuery. It's an hour and includes DDD design principles along with DI and focuses on creating reusable jQuery code.

http://channel9.msdn.com/Series/mvcConf/mvcConf-2-Eric-Sowell-Evolving-Practices-in-Using-jQuery-and-Ajax-in-ASPNET-MVC-Applications

Answer 1

• Create controllers that represent every concept in your domain. You may need only one, "TestsController".

• Create actions for each test returning JsonResult.

• Write the functionality for each test, create some kind of return object, and then serialize it by calling Json(result, JsonRequestBehavior.AllowGet) .

• In the index action of your home controller (provided by default with the new MVC project), return View () and create the corresponding View.

• In this view, make your Ajax calls with Jquery in the same way as always, and show the results. The URLs for Ajax calls will look like this:

  / Tests / Test1

etc.

Answer 2

Here is a brief description of the code using one form as an example. I know that you have indicated a few, but it should be relatively easy to expand this

1) Create a PostModel for each form that will hold the values. So create a models.cs file and add the following class to it:

 public class Form1ViewModel() // This will hold all the fields you need in the form { public string Field1 { get; set; } public string Field2 { get; set; } // etc... } public class Form1PostModel() { public string Value1 { get; set; } public string Value2 { get; set; } // add for each post value you expect } public class ReturnModel() // some object to hold the values you want to return { public string Message { get; set; } public bool Success { get; set; } } 

2) In your controller: HomeController.cs set the following:

 public ActionResult Index() { return View( new Form1Model() ); // default view } [HttpPost] public JsonResult Form1(Form1PostModel model) { ReturnModel returnModel = SomeAction(model); return JsonResult(returnModel); } 

3) In your view (Views / Home / Index.cshtml) you should display this form and call the ajax message:

 @using (Html.BeginForm()) { @Html.EditorForModel() <div class="editor-actions"> <input type="button" value="Update" id="btnUpdateForm1" /> </div> } 

4) Then jQuery:

 $('#btnUpdateForm1').click(function(){ $.post( "/Home/Form1", // url { Value1 : "", Value2 : "" }, // payload function(result) // success { // can access result.Message or result.Success here (IE fields returned from the model) }, function( msg ) // error { alert( 'Error' ); } ); return false; // for the button }); 

Hope this gives you an idea. I did it from my head, so I apologize for any small things.

Answer 3

Partial views may be the best way to get closer to what you need. Then you can separate each view separately.

Answer 4

Here is what I do to update some information about page elements:

Im my view Practice .ascx, I have a set of practice for updating

 <div style=" width:20%; float:right; background-color:inherit" > (Last Seen: <span id="<%: practice.ID %>LastSeenPractice" class="LastSeenPractice" >Loading...</span>) </div> 

Also in Practices.ascx in the jQuery scripting section to update practice, I do this every 10 minutes:

 function UpdatePractice() { jQuery.post("/reporter/LastSeenPractice", $.param({ practiceID: pid, doctorIDs: DoctorIDs }, true), UpdateLastSeenPractice, "json"); } setInterval(UpdatePractice, 1000*60*10) 

In your controller, create a function to receive a jquery call:

 [HttpPost] public JsonResult LastSeenPractice(string practiceID, List<String> doctorIDs) { ... process query ... return Json(new { pid = practiceID, LastSeenPractice = lastSeenPractice, LastSeenDoctor = lastSeenDoctor }); } 

and finally back to jscript, create a callback function to handle the json result

 function UpdateLastSeenPractice(data) { $("#" + data.pid + " .LastSeenPractice").html(data.LastSeenPractice); for (var key in data.LastSeenDoctor) { $("#" + key + " .LastSeenDoctor").html(data.LastSeenDoctor[key]); } }; 

and this should be the main thread of making an ajax call using jQuery

Update: I forgot about partial viewing of part of the question. I use nested partial views to reduce the complexity of already complex syntax. Each of my practices is under its own view, and index.ascx goes through all the methods and creates a partial view in treenode and passes a parameter (unfortunately, u can only pass one of them, so I set all the settings necessary for the partial view in dictionary, therefore, PracticesDict:

 <div id="bodyPracticesList" style="float:left; width:100%"> <% Html.RenderPartial("Practices", Model.PracticesDict); %> </div> 

All my scripts are in index.aspx, and html is in practice.ascx, so you can do something similar with your three forms, that is, put them in partial views, as Max suggested breaking things.