how to bind the dropdown list with Webgrid in ASP.NET MVC3, Razor

In this tutorial i will show you that how can we create the dynamic webgrid on dropdown selected index change in MVC & razor using JSON ....



What we will do is that on dropdown change event we will call the jquery which will take the value of the selected item of dropdown list & will pass it to Action....


DropDown list is ...

@Html.DropDownListFor

(model => @Model.ListId, new SelectList(Model.Lists, "ListId", "Name"), "--Select a list--")

also we have to one empty Div like this...
<div id="grid">   </div>

Jquery is ....

    <script type="text/javascript">
        $(function() {
            $('#ListId').change(function() {
                var customDataListId = $("#ListId").val();
     $.getJSON('@Url.Action("Data")', { id: ListId}, function (result) {
                    var customDataList = $('#grid');
                    customDataList.empty();
                    customDataList.append(result.Data);
                });
            });
        });
    </script>

Where....  "#ListId" is Name property of the Dropdown list...

     ......    "Data" is action name 

     .....    "result" is result returned from the action .....  see bellow for action method

      .......   "#grid" is id of the empty grid

Now We will write ActionMethod....

[AcceptVerbs(HttpVerbs.Get)] 
        public JsonResult CustomData(int id)
        {
            // here I get the data from the database in result
            var result = _customDataListRepository.GetCustomDataWithId(id).ToList(); 

//now I create the new webgrid ,also i will pass result as it parameter
            var grid = new WebGrid(result);

//now i create the columns of the grid ....
var htmlString = grid.GetHtml

(tableStyle: "paramTable", htmlAttributes: new {id = "grid"},
                                          columns: grid.Columns(
                                              grid.Column("Name", "MyName"),
                                              grid.Column("CustomValue", "MyCustomValue")
                                              ));

// while returning i am passing this grid as htmlstring...
            return Json(new
                            {
                                Data = htmlString.ToHtmlString()
                            }
                , JsonRequestBehavior.AllowGet);
        } 

By doing this .... every time new grid will be created & old grid will be deleted .....

Also if you want to show whole table which u get from the database  then....

[AcceptVerbs(HttpVerbs.Get)] 
        public JsonResult CustomData(int id)
        {
            // here I get the data from the database in result
            var result = _customDataListRepository.GetCustomDataWithId(id).ToList();   

//now I create the new webgrid ,also i will pass result as it parameter
            var grid = new WebGrid(result); //now i create the columns of the grid ....
var htmlString = grid.GetHtml();// while returning i am passing this grid as htmlstring...
            return Json(new
                            {
                                Data = htmlString.ToHtmlString()
                            }
                , JsonRequestBehavior.AllowGet);
        }

Like this we can create dynamic webgrid using JSON with dropdown list 

How to show image from binary data in database in MVC3 razor?

In this tutorial i will explain that how can we show image in web page from binary data of database.

Get image from database in your controller....

        public ActionResult GetImage(int id)

         {

            var imageData = ....get image from database in binary formate...

            return File( imageData, "image/jpg" );

         }

                Create the action in your controller which will get the binary data of the image from database in the variable.

                Return the File to the view with binary data & image file type.

Call the action from the view

<img src="@Url.Action("GetImage", "ImageLoader", 

new { id = @Model.Id })" name="logoFile"/>

                Now we need to call the action from the view. Which can be done as shown above.

Where :

GetImage : Action Name. (here put your action name)

ImageLoader : Controller Name. (here put your controller name)

@Model.Id : id of the data for which you want to show the image (here put id for which you want to show the image )

razor examples & work sheet for asp.net MVC

HtmlHelper

Method	Action	Output
@Html.ActionLink(s:text, s:action, o:attributes)	Writes an anchor tag to a link for a specific action.	<a href="action">text</a>
@Html.AntiForgeryToken(s:salt, s:domain, s:path)	Generates a hidden form field (anti-forgery token) that is validated when the form is submitted.
@Html.AttributeEncode(s: input)	HTML-encodes the string (as an attribute).
@Html.BeginForm(s:action, s:controller, o:values)	Writes an opening <form> tag to the response.	<form action="/controller/action/">
@Html.BeginRouteForm(s:routeName)	Writes an opening <form> tag for the route.	<form action="route">
@Html.CheckBox(s:name, b:checked)	Returns a check box input element.	<input type="checkbox" name="name" id="name" checked="checked" />
@Html.CheckBoxFor(e:expression)	Returns a check box input element for the model.	<input type="checkbox" name="name" id="name" checked="checked" />
@Html.DropDownList(s:name, list:selectlistitems)	Returns a single-selection select element.	<select name="name" id="name"></select>
@Html.DropDownListFor(e:expression, list:selectlistitems)	Returns a single-selection select element for the model.	<select name="name" id="name"></select>
@Html.Encode(s:input)	HTML-encodes the string.
@Html.EndForm()	Renders the closing </form> tag to the response.	</form>
@Html.Hidden(s:name, o:value)	Returns a hidden input element.	<input type="hidden" value="value" name="name" />
@Html.HiddenFor(e:expression)	Returns a hidden input element for the model.	<input type="hidden" value="value" name="name" />
@Html.ListBox(s:name, list:selectlistitems)	Returns a multi-select select element.	<select multiple="multiple" name="name" id="name"></select>
@Html.ListBoxFor(e:expression, list:selectlistitems)	Returns a multi-select select element for the model.	<select multiple="multiple" name="name" id="name"></select>
@Html.Password(s:name, o:value)	Returns a password input element.	<input type="password" value="value" name="name" />
@Html.PasswordFor(e:expression)	Returns a password input element for the model.	<input type="password" value="value" name="name" />
@Html.RadioButton(s:name, o:value, b:checked)	Returns a radio button input element.	<input type="radio" value="value" name="name" checked="checked" />
@Html.RadioButtonFor(e:expression, o:value)	Returns a radio button input element for the model.	<input type="radio" value="value" name="name" checked="checked" />
@Html.Partial(s:name, o:model)	Renders a partial view (.cshtml).
@Html.RouteLink(s:text, s:routeName)	Returns an anchor element (a element) that contains the virtual path of the specified action.	<a href="action">text</a>
@Html.TextArea(s:name, s:value)	Returns the specified textarea element.	<textarea name="name">value</textarea>
@Html.TextAreaFor(e:expression)	Returns the specified textarea element for the model.	<textarea name="name">value</textarea>
@Html.TextBox(s:name, o:value)	Returns a text input element.	<input type="text" name="name" value="value" />
@Html.TextBoxFor(e:expression)	Returns a text input element for the model.	<input type="text" name="name" value="value" />
@Html.TextBoxFor(e:expression)	Returns a text input element for the model.	<input type="text" name="name" value="value" />

UrlHelper

Method	Action	Output
@Html.Action(s:action, s:controller)	Generates a fully qualified URL to an action method.
@Html.Content(s:path)	Converts a virtual (relative) path to an application absolute path.
@Html.Encode(s:url)	Encodes special characters in a URL string into character-entity equivalents.
@Html.RouteUrl(s:route)	Generates a fully qualified URL for the specified route name.