Friday, August 24, 2012

Some MVC @Razor Ajax snippets

Loads of stuff around, mostly on stackoverflow.com when searching for help. But sifting through all those variations of other peoples problems that are only 'similar' to yours...

Instead of using target I wanted to return multiple partial views, dependant upon success or fail of the call (submit), I also wanted different actions with the same form data. The simplified version of the mechanism is below, and yes there are probably  a multitude of different ways to accomplish the same, but this works for me and my way of thinking.

@using (Ajax.BeginForm("CreateNew", "Home", new AjaxOptions { OnComplete = "CreateComplete", OnBegin = "CreateBegin" }))

         <input type="submit" onclick="mysub='New'" value="CreateNew" name="submitButton" id="createnew" style="visibility:hidden"/><span id="createwait" style="visibility:hidden"> Please wait..</span>
         <input type="submit" onclick="mysub='Find'" value="CreateFind" name="submitButton" id="createfind" />

        <script language="javascript" type="text/javascript">

            function CreateComplete(result) {
                if (mysub == 'New') {
                     $("#Audit").html(result.responseText);
                 }
                 if (mysub == 'Find') {
                     var _ret = result.responseText;
                     var _reta = _ret.split("<br />");
                     $("#Regions").val($.trim(_reta[0]));
                      }

            function CreateBegin() {
                $("createnew").attr("disabled", "disabled");
                $("#createnew").css({ "visibility": "hidden" });
                $("#createwait").css({ "visibility": "visible" });
            }
</script>
In my Controller action :
         [HttpPost]
        public ActionResult CreateNew(string submitButton, Index ix)
        {
            if (submitButton == "CreateNew")
            {
.....
                return PartialView("Audit", (ix.audit));
            }
            else
            {
......
                 return PartialView("Audit", (ix.region));   
            }


Just while i am here, a strange JQuery problem to pass parameters to event functions that I want to manually call...for example, if i send and Ajax request off, get some data back, and based on the data retrieved i want to update a dropdown list selected item, then populate another dropdown list and execute that changed event handler.
So from my above javascript function CreateComplete I change the selected item on the #Regions dropdown list, then I want to populate the Office dropdown by using the change event on #Regions AND use the same response as I already have to set the selected Office:-
                $("#Regions").trigger("change", $.trim(_ret));
 $("#Regions").change(function (event, _office) {
 $.getJSON("./Home/GetOfficeList", { CountryId: $("#Regions").val() }, function (data) {
               data = $.map(data, function (item, a) {
                return "<option value=" + item.Value + ">" + item.Text + "</option>";
                  });}
                var _reta = _office.split("<br />");
                $("#Offices").val(($.trim(_reta[1])).replace(' ', '_'));
                $("#Depts").val(($.trim(_reta[2])).replace(' ', '_'));

So notice how i pass the whole response to the trigger call? at first i passed the parameters i needed (Office and Dept) seperately like this :-
                $("#Regions").trigger("change", $.trim({_ret[1],_ret[2]}));
and the regions function changed to :-
                $("#Regions").change(function (event, _office,_dept)
But _dept parameter never made it accross, no matter how i packaged the calling parameters.
according to the JQuery doumentation :-
The event object is always passed as the first parameter to an event handler, but if additional parameters are specified during a .trigger() call, these parameters will be passed along to the handler as well. To pass more than one parameter, use an array as shown here. As of jQuery 1.6.2, a single parameter can be passed without using an array.







No comments:

Post a Comment