Style.css
body
{
background-color: Gray;
}
#Div1
{
margin-left:200px;
}
#Banner
{
width:890px;
height:100px;
background-color:#104E8B;
}
#home
{
width:890px;
height:700px;
}
#side
{
width:150px;
height:700px;
background-color: #528B8B ;
margin-top:1px;
float :left;
}
.menu
{
position :relative;
width:120px;
height:20px;
background-color:Menu;
margin-left:150px;
margin-top :100px;
}
.row
{
width:200px;
height:50px;
}
#menuitem
{
position:relative;
top:1px;
width:739px;
float:left;
left: 1px;
background-color:Menu;
}
#content
{
height:670px;
position:relative;
top:2px;
width:739px;
float:left;
left: 1px;
background-color:Menu;
}
#data
{
height:500px;
position:relative;
top:100px;
width:600px;
float:left;
left: 100px;
background-color:Menu;
}
@model IPagedList
ReplyDelete@{
ViewBag.Title = "Home Page";
}
<1input type="search" name="searchTerm" data-of-autocomplete="@Url.Action("Autocomplete")" />
<1input type="submit" value="Search by Name" />
@Html.Partial("_RestaurantList",Model)
@model IPagedList
ReplyDelete<1div id="restaurantList">
<1div class="pagedList" data-of-target="#restaurantList">
@Html.PagedListPager(Model, page => Url.Action("Index", new { page }),
PagedListRenderOptions.MinimalWithItemCountText)
@foreach (var item in Model)
{
<1h3>@item.Name
<1div>@item.City, @item.Country
<1div>Reviews : @item.ReviewsCount
<1hr />
}
$(function () {
ReplyDeletevar ajaxformSubmit = function () {
var $form = $(this);
var options = {
url : $form.attr("action"),
type : $form.attr("method"),
data : $form.serialize()
};
$.ajax(options).done(function (data) {
var $target = $($form.attr("data-of-target"));
var $newhtml = $(data);
$target.replaceWith($newhtml);
$newhtml.effect("highlight");
});
return false;
}
var submitAutocompleteForm = function (event, ui) {
var $input = $(this);
$input.val(ui.item.lable);
var $form = $input.parents("form:first");
$form.submit();
};
var createAutocomplete = function () {
var $input = $(this);
var options = {
source: $input.attr("data-of-autocomplete"),
select: submitAutocompleteForm
};
$input.autocomplete(options);
};
var getPage = function () {
var $a = $(this);
var options = {
url: $a.attr("href"),
data:$("form").serialize(),
type: "get"
};
$.ajax(options).done(function (data) {
var target = $a.parents("div.pagedList").attr("data-of-target");
console.log(target);
$(target).replaceWith(data);
});
return false;
};
$("form[data-of-ajax='true']").submit(ajaxformSubmit);
$("input[data-of-autocomplete]").each(createAutocomplete);
$(".main-content").on("click", ".pagedList a", getPage);
});