Scribd
Upload
63 views20 pages

Partial Ajax

This document discusses partial views and AJAX in MVC. It defines partial views as reusable views that can be included in multiple other views. It provides examples of calling partial views using Html.Partial and Html.RenderPartial. It also discusses using AJAX to call controller actions that return partial views or JSON data without reloading the page.

Uploaded by

Ahmed Shams
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
63 views20 pages

Partial Ajax

This document discusses partial views and AJAX in MVC. It defines partial views as reusable views that can be included in multiple other views. It provides examples of calling partial views using Html.Partial and Html.RenderPartial. It also discusses using AJAX to call controller actions that return partial views or JSON data without reloading the page.

Uploaded by

Ahmed Shams
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

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/

You might also like