MVC

Christen Zarif Foad

• Partial View
• Ajax
PARTIAL VIEW
 Partial View
• Partial view is a reusable view, which can be used
as a child view in multiple other views.

• We can use the partial view in the layout view, as

well as other content views.

• Demo : we can use the same navigation bar in

multiple layout views so you can make partial
view to this navigation without rewriting the
same code everywhere
 Partial View (Con.)

• Note :If a partial view will be shared with multiple

views of different controller folder then create it in
the Shared folder, otherwise you can create the
partial view in the same folder where it is going to be
used.
 Partial View (Con.)

• We can call or display partial view within a view

mainly in five ways. Those are
– Html.RenderPartial
– Html.Partial
– Html.RenderAction
– Html.Action
– jQuery load function
 Render partial view
1. @Html.Partial():
– Helper method renders the specified partial view. It accept partial
view name as a string parameter and returns MvcHtmlString.
– Doesn't need to be in code block because it returns a html string.
Helper Method Description
MvcHtmlString Html.Partial Renders the given partial view content in the referred view.
(string partialViewName)
MvcHtmlString Html.Partial Renders the partial view content in the referred view. Model
(string partialViewName, parameter passes the model object to the partial view.
object model)
MvcHtmlString Html.Partial Renders the partial view content in the referred view. View
(string partialViewName, data parameter passes view data dictionary to the partial view.
ViewDataDictionary viewData)
MvcHtmlString Html.Partial Renders the partial view content in the referred view. Model
(string partialViewName,object parameter passes the model object and View data passes view
model, ViewDataDictionary data dictionary to the partial view.
viewData)
 Render partial view (con.)
2. @Html.RenderPartial():
– is same as the Partial method except that it returns
void and writes resulted html of a specified partial
view into a http response stream directly.
– This method is faster than Partial method since its result is
directly written to the response stream which makes it fast.

– RenderPartial returns void, so a semicolon is

required at the end and so it must be enclosed in the
braces.
 Render partial view (con.)
3. @Html.RenderAction() :
– The RenderAction helper method invokes a specified
controller and action and renders the result as a partial view.
– The specified Action method should return PartialViewResult
using the Partial() method.
Name Description
RenderAction Invokes the specified child action method and renders the
(String actionName) result in the parent view.
RenderAction Invokes the specified child action method using the
(String actionName, specified parameters and renders the result inline in the
Object routeValue) parent view.
RenderAction Invokes the specified child action method using the
(String actionName, specified controller name and renders the result inline in
String controllerName) the parent view.
 Example
• Partial view :

• The Second Page

Render Partial View Using jQuery
<div id="partialviews">
</div>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/jscript">
$(document).ready(function () {
$("#partialviews").load('/Product/GetProducts');
});
</script>
AJAX
Ajax
 Jquery Ajax
• create action that return json object

• In main view :
call action using
jquery ajax

• For More Info

 Jquery Ajax (Con.)
• Call Action That return Partial view using Jquery Ajax
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$.ajax({
url: '/course/IndexPartial',
//contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'html'
, success: function (result) {
$('#courseList').html(result);
},
error: function (xhr, status) {
alert(status);
}
});
});
});
</script>
Ajax with ASP.Net MVC
Visual Feedback
 Properties of AjaxOptions
• Using the following 4 properties of the AjaxOptions
class
• We can associate Javascript functions that get called
on the client 3t1frc
• TextBox AutoComplete
– https://www.c-sharpcorner.com/uploadfile/0c1bb2/creating-
autocomplete-textbox-in-asp-net-mvc-5/