Total Pageviews

Friday, March 22, 2013

Post data to the action result in jqGrid and ASP.NET MVC

Here when a dropdown change the filter value (what we are selected ) will pass to the action result

Script

 $(".selectRequestType").change(function () {
                 $('#jqgRequests').setGridParam({ postData: { FilterValue: $(this).val() } }).trigger('reloadGrid', [{ page: 1 }]);
            });

Action Result

 [AcceptVerbs(HttpVerbs.Post)]
            public JsonResult LoadRequest(JqGridRequest request, PostDataViewModel postData)
            {
           }

 public class PostDataViewModel
    {
       public string FilterValue { get; set; }
    }


Saturday, March 16, 2013

Html.Partial,Html.RenderPartial,Html.Action and Html.RenderAction in ASP.NET MVC

Html.Partial and Html.RenderPartial
        The Html.Partial helpers renders a partial view in to string.Typically, a partial view contains reusable markup you want to render from inside multiple different views. Partial has four overloads


public void Partial(string partialViewName);
public void Partial(string partialViewName, object model);
public void Partial(string partialViewName, ViewDataDictionary viewData);
public void Partial(string partialViewName, object model,
ViewDataDictionary viewData);
Example : 
@Html.Partial("MyPartial")    

The RenderPartial  is similar to Partial, but RenderPartial writes directly to the response
output stream instead of returning a string. For this reason, you must place RenderPartial inside
a code block instead of a code expression
Example : 
@{Html.RenderPartial("MyRenderPartial");}
So, which should you use, Partial or RenderPartial
            In general, you should prefer Partial to RenderPartial because Partial is more convenient (you don’t have to wrap the call in a code block with curly braces). However, RenderPartial may result in better performance because it writes directly to the response stream.
Html.Action and Html.RenderAction
         Html.Action and Html.RenderAction are similar to Partial and RenderPartial.Action  executes a separate controller action and display the results.the only difference between Action and RenderAction is that RenderAction writes directly to the response.

Example :
      Imagine you are using the following controller

public class ActionDemoController : Controller {
public ActionResult Index() {
return View();
}
[ChildActionOnly]
public ActionResult DisplayMenu() {
var menu = GetMenuFromSomewhere();
return PartialView(menu);
}
}

The Menu action builds a menu model and returns a partial view with just the menu:
@model Menu
<ul>
@foreach (var item in Model.MenuItem) {
<li>@item.Text</li>
}
</ul>
In your Index.cshtml view, you can now call into the Menu action to display the menu:
<html>
<head><title>Index with Menu</title></head>

<body>
@Html.Action("DisplayMenu")
<h1>Welcome to the Index View</h1>
</body>
</html>


       Notice that the Menu action is marked with a ChildActionOnlyAttribute. The attribute prevents the runtime from invoking the action directly via a URL. Instead, only a call to Action or RenderAction can invoke a child action. The ChildActionOnlyAttribute isn’t required, but is generally recommended for child actions.

Passing values to Action
       Sometimes you want to pass parameters in to the action.

Example:

[ChildActionOnly]
public ActionResult Menu(MenuParameters param) {
return PartialView(
param
);
}


@Html.Action("Menu", new {
options = new 

MenuParameters 
{ Width=400, Height=500 } })










Load Partial View as Partial View Result using Ajax in ASP.NET MVC

            In ASP.NET MVC we can return a Partial View in the form of PartialViewResult using the PartialView method.
           The following example shows Partial update scenarios using Ajax.Using jQuery to load the contents of a PartailView in to the current view using an Ajax call. In this example i have load a simple grid using Ajax.
           Controller and Action Result

 public class PartialController : Controller
    {
        //
        // GET: /Partial/

        public ActionResult GetPartialResult()
        {
            var list = new List<Album>
                           {
                               new Album {Title = "Album1"},
                                new Album {Title = "Album2"},
                                 new Album {Title = "Album3"},
                                  new Album {Title = "Album4"}
                           };
            return PartialView(list);
        }

    }

 public class Album
    {
        public string Title { get; set; }
    }


Right click the ActionResult and Create a PartialView like below

@model IEnumerable<Mvc4Demos.Controllers.Album>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
    </tr>
}

</table>

Here from another view when a button click load the PartialViewResult by using Ajax and Append in to a Result div


<script type="text/javascript">
    $(document).ready(function () {
        $('#btn').click(function () {
            $('#result').load('/Partial/GetPartialResult');
        });
    });

</script>


<input type="button" id="btn" value="PartialExample"/>
<div id="result"></div>


Sunday, March 3, 2013

jQuery Type Testing Function

Type testing function

  • Determine the type of an object
  • Useful for optional parameters &amp; validation
Example
             In this example  isNumeric() and isFunction() are used as Type testing function
   
   <head>
    <title></title>
    <script src="script/jquery-1.7.1.js" type="text/javascript"></script>

</head>
<body>
    <script type="text/javascript">
        function callAnotherFunction(arg1,arg2,arg3) {
            var times = $.isNumeric(arg1) ? arg1 : 3;
            var delay = $.isNumeric(arg2) ? arg2 : 1000;
            var functiontocall = $.isFunction(arg1) ? arg1 : $.isFunction(arg2) ? arg2 : arg3;
            var i = 0;
            (function loopIt() {

                i++;
                functiontocall();
                if(i<times) {
                    setTimeout(loopIt, delay);
                }
            })();
        }        
   

        function functionToCall() {
            $('#output').append("<br/>fuction called");
        }

        $(document).ready(function () {
            callAnotherFunction(3, 500, functionToCall);
        });
               
    </script>
    <div id="output"></div>
</body>
</html>

   
   
Output
fuction called
fuction called
fuction called