I am working with ASP.NET MVC .
I give the proper url name but error is the resource is not found.
I am click the checkout button and trying to open view but view is not open.
Please see below code.
cartDisplay.cshtml
#{
ViewBag.Title = "cartDisplay";
}
<h2>Add to Cart Details</h2>
<script src="~/kendo/js/kendo.all.min.js"></script>
<div style="display: inline">
<div class="text-left">
<button class='btn btn-group-sm btn-success' onclick='submit()'>CheckOut</button>
</div>
</div>
<div id="example">
<br />
<br />
<div id="grid"></div>
<script>
$(document).ready(function () {
//here other code
function submit() {
debugger
$.ajax({
url: "/User/addToCartOrderStore", //here I am giving the proper url but error is resource not found error
type: 'GET',
cache: false,
contentType: false,
processData: false,
success: function (response) {
window.location.href = response.redirectToUrl;
}
});
}
</script>
UserController.cs
//Shipping Details and order details
[HttpGet]
public ActionResult addToCartOrderStore()
{
return View();
}
[HttpPost]
public ActionResult addToCartOrderStore(FormCollection sh)
{
....
}
I am trying to open below view but below view is not open
addToCartOrderStore.cshtml:
#{
ViewBag.Title = "addToCartOrderStore";
}
<h2>AddToCart OrderStore</h2>
<script src="~/kendo/js/kendo.all.min.js"></script>
<br />
<div class="navbar navbar-inverse text-center">
<div class="container text-center">
<div class="navbar-collapse collapse text-center">
<ul class="nav navbar-nav text-center">
#*<li>#Html.ActionLink("Home", "index")</li>
<li> #Html.ActionLink("My Cart", "cartdisplay")</li>
<li> #Html.ActionLink("My Orders", "orderdisplay")</li>*#
<li>#Html.ActionLink("Logout", "Logout")</li>
</ul>
</div>
</div>
</div>
<form id="form"></form>
<script>
$(document).ready(function () {
var today = new Date();
var maxDate = today.setDate(today.getDate() + 60);
$("#form").kendoForm({
layout: "grid",
grid: {
cols: 2,
gutter: 20
},
items: [
{
type: "group",
label: "Customer Address",
items: [
{
field: "firstname",
label: "First Name:",
validation: { required: true }
},
{
field: "lastname",
label: "Last Name:",
validation: { required: true }
},
See below error image:
I am trying to open view but give an error the resource cannot be found.
I trying to return view but give an error but view is not shown.
need help
Related
I want to load every year's data in jqgrid when I click on a button and after loading a modal form and selecting the year from drop down list. a diagram of the steps
but i don't know how to do this.
And this is my source code :
<!-- Page content -->
<div class="w3-content" style="max-width: 100%">
<div class="container" style="width:40%;margin-top:2%">
Filter
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
×
</div>
<div class="modal-body">
<form id="myForm" dir="rtl">
<div class="form-group">
<label>Year</label>
#Html.DropDownListFor(model => model.YEAR_ABBR, ViewBag.YearList as MultiSelectList, "--select--", new { #class = "form-control", #id = "ddlYear", multiple = "multiple" })
</div>
</form>
</div>
<div class="modal-footer">
Cancel
<input type="reset" value="GetRep" class="btn btn-success" id="btnSubmit" />
</div> </div>
</div> </div> </div>
<div dir="rtl" align="center" style="overflow:auto" class="tablecontainer">
<div id="rsperror"></div>
<table id="list" cellpadding="0" cellspacing="0"></table>
<div id="pager" style="text-align:center;"></div>
</div>
Now my script is something like this:
<script type="text/javascript">
$(document).ready(function () {
bindData();
$("#btnSubmit").click(function () {
$('#list').trigger('reloadGrid'); })
});
var bindData = function () {
$('#list').jqGrid({
url: '#Url.Action("Get_RepContracts","Home")',
postData: { YEAR_ABBR: function () { return $('#YEAR_ABBR').val(); } },
datatype: 'json',
jsonReader: {
root: "Rows",
page: "Page",
},
mtype: 'GET',
//columns names
colNames: ['Vahed_Descript' ],
colModel: [
{ name: 'Vahed_Descript', index: 'Vahed_Descript', align: 'right', width: 200, sorttype: "number", }
],
pager: $('#pager'),
rowNum: 800,
rowList: [ 800 ,1000],
sortname: 'Vahed_Descript',
hidegrid: false,
direction: "rtl",
gridview: true,
rownumbers: true,
footerrow: true,
userDataOnFooter: true,
loadComplete: function () {
calculateTotal();
$("tr.jqgrow:odd").css("background", "#E0E0E0");
},
loadError: function (xhr, st, err) {
jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
} , loadonce: true
}) ;
And here the button code ( My modal form works well. when I click the filter button, the filter options in my modal form appear, and then I select the year from year dropdownlist in modal and then i click the report button, after that the below code fires and I can see the selected year's data in action "Get_RepContracts" but it does not bind to my jqgrid):
Thanks in Advance...
UPDATE : Now My code is like below :
$(document).ready(function () {
bindData();
$("#btnSubmit").click(function () {
var myPostData = $('#list').jqGrid("getGridParam", "postData");
$('#list').trigger('reloadGrid');
$("#myModal").modal("hide");
}) });
var bindData = function () {
$('#list').jqGrid({
url: '#Url.Action("Get_RepContracts","Home")',
postData: {
YEAR_ABBR : function () { return $("#YEAR_ABBR").val();},
} ,
datatype: 'json',
jsonReader: { ........
It seems to me that you have small problem with the usage of correct id of select element. Your HTML code contains #id = "ddlYear" parameter of #Html.DropDownListFor:
#Html.DropDownListFor(
model => model.YEAR_ABBR,
ViewBag.YearList as MultiSelectList,
"--select--",
new {
#class = "form-control",
#id = "ddlYear",
multiple = "multiple"
}
)
but you still use
postData: {
YEAR_ABBR: function () { return $("#YEAR_ABBR").val(); }
}
To solve the problem you should just modify the code to
postData: {
YEAR_ABBR: function () { return $("#ddlYear").val(); }
}
I have written a jquery for adding product to the cart and this is the partiallistofproduct.cshtml file.
<div class="container">
<div class="row">
<div class="col-sm-9 padding-right">
<div class="features_items">
<h2 class="admin-title text-center"></h2>
<!--Partial list of Products-->
#foreach (var item in Model)
{
<div class="features_items">
<!--features_items-->
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div id="#item.ProductID" class="productinfo text-center">
<a href="#Url.Action("ReadProductDetails", "Home",new {id=item.ProductID })">
<img src="#Url.Content(item.ProductImage)" alt="" />
</a>
<h2>Rs #item.Price</h2>
<p>#item.ProductName</p>
#if (Session["UserName"] != null)
{
<p hidden id="userid">#Session["UserID"].ToString()</p>}
<input type="hidden" id="hdnSession" data-value="#Request.RequestContext.HttpContext.Session["Name"]" />
<input id="AddToCart" type="submit" value="Add to Cart" class="btn btn-default add-to-cart" />
</div>
<div class="product-overlay">
<div id="#item.ProductID" class="overlay-content">
<h2>Rs #item.Price</h2>
<p id="productid">#item.ProductID</p>
<a class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</div>
</div><!--features_items-->
}
<!--Pagination part-->
#Html.PagedListPager(Model, page => Url.Action("Index", new { page, pageSize = Model.PageSize }))
showing #Model.FirstItemOnPage to #Model.LastItemOnPage of #Model.TotalItemCount Products
</div>
</div>
</div>
</div>
The following is the script file to add the product to the cart.Here i am able to add the product to the cart.
<script>
$(document).ready(function () {
//on click on add to cart class this will perform
$('.add-to-cart').click(function () {
//checking user is logged in or not otherwise redirect to login page
var sessionValue = $("#hdnSession").data('value');
var aaa = parseInt($(this).closest('div').prop('id'));
if (sessionValue != false) {
$.ajax({
url: 'Account/AddToCart',
data: { //Passing data
UserID: $("#userid").html(), //Reading text box values using Jquery
ProductID: $(this).closest('div').prop('id'),
Quantity: 1
},
type: 'POST',
dataType: 'json',
//on success message will show as an alert
success: function (data) {
if (data != null && data.success) {
alert(data.responseText);
} else {
// DoSomethingElse()
alert(data.responseText);
}
},
//on failure error message will occur
error: function (data) {
alert("error");
}
});
}
else {
//redirection to login page
window.location.replace("#Url.Action("Login", "Account")");
}
});
});
</script>
Here i want to show a bootstrap modal success message with successful adding the product to the cart. I dont know how to use bootstrap modal to show the success message.
So please help me to show a bootstrap modal success message.
Add modal in your view which you want to show on after successful addition of products to cart and add style:display:none
then inside Ajax Success function just write
$("#modal-Id").modal();
I'm currently working on a ASP.NET MVC project. The sites of the web application are created with Bootstrap. Later I added some AngularJS script to be able to translate the page into different languages. This works fine for all the pages, but not so if a partial view is loaded from a page.
So, for example I have a page to search for rollout objects by name or host name. On the page all the angular expressions in curly braces are evaluated properly and are replaced with strings in several languages by using a translate script. Now if I filter the objects by one of the three attributes the partial view for that page is loaded showing the results of the search, but here are the angular expressions not evaluated and it just shows the expressions themselves.
Here is the page where it works properly:
#{
ViewBag.Title = "{{ 'ROLLOUT-OBJECT_MANAGEMENT.TITLE' | translate }}";
}
<!-- html -->
<div style="font-size: 20px; margin-top: 20px; margin-bottom: 20px;">
<div class="gray-background list-group-item" translate="{{'ROLLOUT-OBJECT_MANAGEMENT.TITLE'}}"></div>
</div>
<div class="list-group">
<div class="gray-background list-group-item">
<div class="row margin-bottom">
<div class="col-md-3">
<h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.FIRST_NAME'}}"></h6>
</div>
<div class="col-md-3">
<h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.SURNAME'}}"></h6>
</div>
<div class="col-md-3">
<h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.HOST_NAME'}}"></h6>
</div>
</div>
<div class="row margin-bottom">
<div class="col-md-3">
<!-- referenced in getPartial() -->
<input type="text" class="form-control" id="iFirstName" name="iFirstName" placeholder="">
</div>
<div class="col-md-3">
<!-- referenced in getPartial() -->
<input type="text" class="form-control" id="iSurName" name="iSurName" placeholder="">
</div>
<div class="col-md-3">
<!-- referenced in getPartial() -->
<input type="text" class="form-control" id="iHostName" name="iHostName" placeholder="">
</div>
<div class="col-md-3">
<!-- getPartial() added to click through javascript-->
<button type="submit" class="btn btn-primary btn-block" id="iButton"><span translate="{{'ROLLOUT-OBJECT_MANAGEMENT.BUTTON_SEARCH'}}"></span><span class="white-color glyphicon glyphicon-search"></span></button>
</div>
</div>
</div>
</div>
<div class="list-group">
<div class="gray-background list-group-item">
<h5><span translate="{{'ROLLOUT-OBJECT_MANAGEMENT.RESULTS'}}"></span><span class="purple-color glyphicon glyphicon-globe"></span></h5>
</div>
<!-- referenced in getPartial() -->
<div class="gray-background list-group-item">
<div class="row">
<div class="col-md-12" id="partialViewContainer">
#{Html.RenderPartial("_RolloutObjectManagementResultsPartial");}
</div>
</div>
</div>
</div>
<!-- layout -->
#Styles.Render(
"~/content/chosen/chosen.css",
"~/content/chosen/prism.css",
"~/content/chosen/style.css",
"~/content/bootstrap.css",
"~/content/Site.css")
<!-- javascript -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/chosen/chosen.jquery.js"></script>
<script src="~/Scripts/chosen/prism.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script>
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
<script>
//add functionality to button
$('#iButton').click(function () {
getPartial('0');
});
</script>
<script>
function previous() {
var temp = document.getElementById("hPage").value;
//alert(temp);//debug
if (temp > 0) {
temp = --temp;
}
getPartial(temp);
}
function next() {
var temp = document.getElementById("hPage").value;
//alert(temp);//debug
temp = ++temp;
getPartial(temp);
}
</script>
<script>
function getPartial(newPage) {
//get search values
var tempFirst = document.getElementById("iFirstName");
var tempSur = document.getElementById("iSurName");
var tempHost = document.getElementById("iHostName");
var firstResult = tempFirst.value;
var surResult = tempSur.value;
var hostResult = tempHost.value;
//ajax call
$.ajax({
url: "_RolloutObjectManagementResultsPartial",
type: "POST",
data: { firstName: firstResult, surName: surResult, hostName: hostResult, page: newPage, count: 10 },
dataType: "html",
error: function (xhr) {
//alert(xhr.responseText);//debug
},
success: function (result) {
$("#partialViewContainer").html(result).find("select").each(function () {
$(this).chosen({});
})
},
complete: function () {
//alert("everything worked");//debug
}
});
}
</script>
And here is the partial view where it doesn't work (important are the expressions in {{...}}:
<!-- Import needed namespaces -->
#using RolloutTool.BusinessLayer.Foundation
#using RolloutTool.Utility
<!-- Initializing needed variables -->
#{
List<RolloutObject> RolloutObjects = ViewContext.Controller.ViewBag.RolloutObjects;
List<Cluster> Clusters = ViewContext.Controller.ViewBag.Clusters;
string name = "";
int count = 0;
string rowID = "";
int page = 0;
if (ViewContext.Controller.ViewBag.Page != null)
{
page = ViewContext.Controller.ViewBag.Page;
}
}
<!-- html elements -->
<div class="row">
<div class="col-md-12">
<table class="table">
<thead>
<tr>
<th style="width:25%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.EMPLOYEE'}}"></h6></th>
<th style="width:20%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.WORK_STATION'}}"></h6></th>
<th class="text-center" style="width:15%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.EDIT'}}"></h6></th>
<th class="text-center" style="width:25%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.CLUSTER'}}"></h6></th>
<th class="text-center" style="width:15%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.ASSIGN'}}"></h6></th>
</tr>
</thead>
<tbody>
<!-- creating all RolloutObject Table rows -->
#foreach (RolloutObject ro in RolloutObjects)
{
<!-- generating rowID -->
rowID = "row" + Convert.ToString(count);
count++;
<!-- generating the full employee name -->
name = Functions.TryGetValue(ro.Employee.FirstName) + " " + Functions.TryGetValue(ro.Employee.SecondName) + " " + Functions.TryGetValue(ro.Employee.Name);
<tr id="#rowID">
<td>#name</td>
<td id="#Convert.ToString(rowID + "_hn")">#Convert.ToString(Functions.TryGetValue(ro.Hostname))</td>
<!-- generate link to right rolloutobjectedit -->
<td class="text-center"><span class="btn-pencil glyphicon glyphicon-pencil blue-color glyph-hov" onclick="location.href='#Url.Action("RolloutObjectEdit", "RolloutObject", new {hostName = ro.Hostname })'"></span></td>
<!-- generating the link for cluster addition and populating cluster dropdown -->
<td class="text-center">
<div class="row">
<div class="col-sm-12">
<select class="chosen-select no-margin" style="width:100%" id="#Convert.ToString(rowID + "_cl")" name="iCluster" data-placeholder="Cluster">
#if (ro.Cluster != null)
{
<option selected>#Convert.ToString(Functions.TryGetValue(ro.Cluster.Name))</option>
}
else
{
<option></option>
}
#foreach (Cluster cluster in Clusters)
{
<option>#Convert.ToString(Functions.TryGetValue(cluster.Name))</option>
}
</select>
</div>
</div>
</td>
<td class="text-center"><span class="btn-ok glyphicon glyphicon-ok green-color glyph-hov" onclick="callAjax('#rowID')" /></td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input class="hidden" id="hPage" value="#Convert.ToString(page)" />
<nav>
<ul class="pager">
<li class="pull-left"><a class="btn-paging glyphicon glyphicon-arrow-left" onclick="previous()"></a></li>
<li class="pull-right"><a class="btn-paging glyphicon glyphicon-arrow-right" onclick="next()"></a></li>
</ul>
</nav>
</div>
</div>
<!-- javascript -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/chosen/chosen.jquery.js"></script>
<script src="~/Scripts/chosen/prism.js"></script>
<script>
function callAjax(idRow) {
//get row values
var tempTD = document.getElementById(idRow + "_hn");
var tempSelect = document.getElementById(idRow + "_cl");
var tempHostName = tempTD.textContent;
var tempCluster = tempSelect.options[tempSelect.selectedIndex].text;
//ajax call
$.ajax({
url: "AddToCluster",
type: "POST",
data: { clusterName: tempCluster, hostName: tempHostName },
dataType: "html",
error: function (xhr) {
alert(xhr.responseText);
},
success: function (result) {
},
complete: function () {
//alert("everything worked");//debug
}
});
}
</script>
<script>
function previous() {
var temp = document.getElementById("hPage").value;
//alert(temp);//debug
if (temp > 0) {
temp = --temp;
}
getPartial(temp);
}
function next() {
var temp = document.getElementById("hPage").value;
//alert(temp);//debug
temp = ++temp;
getPartial(temp);
}
</script>
<script>
function getPartial(newPage) {
//get search values
var tempFirst = document.getElementById("iFirstName");
var tempSur = document.getElementById("iSurName");
var tempHost = document.getElementById("iHostName");
var firstResult = tempFirst.value;
var surResult = tempSur.value;
var hostResult = tempHost.value;
//ajax call
$.ajax({
url: "_RolloutObjectManagementResultsPartial",
type: "POST",
data: { firstName: firstResult, surName: surResult, hostName: hostResult, page: newPage, count: 10 },
dataType: "html",
error: function (xhr) {
alert(xhr.responseText);
},
success: function (result) {
$("#partialViewContainer").html(result).find("select").each(function () {
$(this).chosen({});
})
},
complete: function () {
//alert("everything worked");//debug
}
});
}
</script>
This is the _Layout.cshtml where the scripts are contained and loaded:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - {{ 'TITLE.PROGRAM' | translate }}</title>
#Styles.Render(
"~/Content/css",
"~/Content/flag-icon-css-master/assets/docs.css",
"~/Content/flag-icon-css-master/css/flag-icon.min.css",
"~/Content/Site.css")
<script src="~/Scripts/angular/angular.js"></script>
<script src="~/Scripts/angular/angular-translate.js"></script>
<script src="~/Scripts/angular/angular-cookies.min.js"></script>
<script src="~/Scripts/angular/translate.js"></script>
<script src="~/Scripts/angular/angular-route.min.js"></script>
<script src="~/Scripts/angular/angular-translate-storage-cookie.min.js"></script>
<script src="~/Scripts/angular/angular-translate-storage-local.min.js"></script>
</head>
<body ng-controller="Ctrl">
<!-- Here is the html for the navigation bar etc. -->
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I am really not an expert on AngularJS as I only wanted to provide some cool translation feature, but I hope you guys have an idea why it doesn't work in the partial views.
Its just that you need to call the partial view using ng-include("'controller/action'"). Apostrophe(') is important while writing url.
Example
<div id="TestDiv" ng-include="templateUrl"></div>
and inside the angular controller
var app = angular.module("Layout", []);
app.controller("LoadPage", function ($scope, $http, $sce) {
//Initially
$scope.templateUrl = '/Home/DefaultPage';
// To dynamically change the URL.
$scope.NewProjFn = function () {
$scope.templateUrl = '/Home/ProjectPage';
};
});
It might well not at all be difficult for you to re-implement it but by using ng-include you also need not to make an ajax call. It do it all by itself which includes ajax call, compilation and display. But the functions like ng-click and other events will not work as its a one time compilation process.
This used to work... but now the >> anchor tag of the PagedListPager always passes null to the controller for the page value required...
VS 2013 Web Express & MVC 4 with latest package updates for all.
Just like in Scot Allen's MVC 4 intro, I have a partial view with a PagedListPager
The Controller:
public ActionResult Catalog(string Id= "0", int page=1)
{
var CurrentItemsPage = (get-data-blaw-blaw-blaw).ToPagedList(page,18);
var model = new ShowRoomCatalogPackage(){ CurrentItems = CurrentItemsPage};
return View(model);
}
The catalog page
#model craftstore.Models.ShowRoomCatalogPackage
#{
ViewBag.Title = "Catalog";
Layout = "~/Views/Shared/_Details.cshtml";
}
#using (Ajax.BeginForm("Catalog", "Home", new { category = #Model.SelectedCategoryId, page = 1 },
new AjaxOptions
{
UpdateTargetId = "products",
InsertionMode = InsertionMode.Replace,
HttpMethod = "post"
}
)
)
{
<div class="container" >
<div class="row">
<div class="col-lg-10 col-md-5 col-sm-4 dropdown-menu">
#Html.LabelFor(m => m.SelectedCategoryId)
#Html.DropDownList("id", Model.CategoryItems, new { #id = "ddlCategories", onchange = "this.form.submit();" })
</div>
<div class="col-lg-2 col-md-2 col-sm-1">
#Html.ActionLink("Your Cart", "Index", "ShoppingCart", "", new { #class = "btn btn-green btn-lg" })
</div>
</div>
<div class="row">
#Html.Partial("_CatalogPartial", Model.CurrentItems)
</div><!-- row -->
</div><!-- container -->
}
<br />
<br />
#section Scripts
{
<script type="text/javascript">
new AnimOnScroll(document.getElementById('grid'), {
minDuration: 0.4,
maxDuration: 0.7,
viewportFactor: 0.2
});
</script>
}
The partial view:
#model IPagedList<ShowroomCatalog>
<div id="productList">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="pagedList" data-cs-target="#productList">
#Html.PagedListPager(Model, page => Url.Action("Index", new { category = ViewBag.SelectedCategoryId, page }), PagedListRenderOptions.MinimalWithItemCountText)
</div>
<ul class="grid effect-2" id="grid">
#foreach(var item in Model)
{
var path = String.Format("~/Content/Images/catalog/{0}/{1}", item.OfferType, item.ImagePath);
<li>
<div class="itembox">
<div class="imagebox">
<a href="#Url.Action("Detail", "Home", new { id = item.Id })" title="Detail for #item.CatalogName">
<img class="catalogimg" src="#Url.Content(path)" />
</a>
</div>
<p>#item.CatalogName</p>
</div>
</li>
}
</ul>
</div>
</div><!-- productlist -->
Now the rendered partialview in the browser doesn't have anything in the anchors which may or may not be normal...
<div class="pagedList" data-cs-target="#productList">
<div class="pagination-container"><ul class="pagination"><li class="disabled PagedList-skipToPrevious"><a rel="prev">«</a></li><li class="disabled PagedList-pageCountAndLocation"><a>Showing items 1 through 18 of 65.</a></li><li class="PagedList-skipToNext">»</li></ul></div>
</div>
And when you hover on the >> it doesn't show the page parameter in the URL:
Again, back in the Controller - I get the category (15) but no page parameter or Request.URL parameter is passed to the controller - it's not hiding because of some routing mistake...I think...
How do I get the paging control to work again...???
[EDIT: one more note - the url path on the pager is /controller/action/category/page rather than what shows up on Scot Allen's OdeToFood example where it's equivalent would be /controller/action/category?page=n (like /Home/Catalog/15?page=1 ]
I was missing the JS for the PagedList class anchor element.
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-otf-target");
$(target).replaceWith(data);
});
return false;
};
And this is fired off by :
$(".main-content").on("click", ".pagedList a", getPage);
BUT, this means you need to have your #RenderBody() call in your _Layout.cshtml file wrapped in something with a class of main-content. An example:
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
This is what is getting sent to the server:
http://localhost:3182/Admin/UserAdmin/Save?Count=0&Keys=System.Collections.Generic.Dictionary%602%2BKeyCollection%5BSystem.String%2CSystem.Object%5D&Values=System.Collections.Generic.Dictionary%602%2BValueCollection%5BSystem.String%2CSystem.Object%5D
I am using the unobtrusive jquery.unobtrusive-ajax and it is working fine on other pages in my project. I am not doing anything fancy with the BeginForm helper. It is pretty straight forward actually. I can post it if it helps, but there is not much too it.
I thought another library might be interfering with my code so I removed other scripts and it still does the same thing. It is very weird. Has anyone seen this before and know how to fix it?
Here is the entire view:
#using YogaDiVita.Ui.Helpers
#model YogaDiVita.Domain.YogaDiVitaContext.Model.User
#{
ViewBag.Title = "Profile";
Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
var isInstructor = (bool)ViewBag.IsInstructor;
}
<link href="#Url.ContentArea("~/Scripts/plugins/fineUploader/fineuploader.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Scripts/plugins/jCrop/css/jquery.Jcrop.min.css")" rel="stylesheet"
type="text/css" />
<div class="row-fluid">
<div class="span12">
<h3 class="heading">User Profile</h3>
<div class="row-fluid">
<div class="span8">
#using (Ajax.BeginForm("Save",new RouteValueDictionary(), new AjaxOptions
{
HttpMethod = "POST",
OnSuccess = "OnSuccess",
OnFailure = "OnFailure"
}, new { #class = "form-horizontal well" }))
{
#Html.HiddenFor(u => u.Id)
#Html.HiddenFor(u => u.CreatedById)
#Html.HiddenFor(u => u.ModifiedById)
#Html.HiddenFor(u => u.Username)
#Html.Hidden("isInstructor", isInstructor)
<fieldset>
<div class="control-group formSep">
<label class="control-label">
Username</label>
<div class="controls text_line">
<strong>#Model.Username</strong> Reset Password
</div>
</div>
<div class="control-group formSep">
<label for="fileinput" class="control-label">
User avatar</label>
<div class="controls">
<div data-fileupload="image" class="fileupload fileupload-new">
<div style="width: 80px; height: 80px;" class="fileupload-new thumbnail">
<img src="http://www.placehold.it/108x108/EFEFEF/AAAAAA " alt="" id="userAvatar">
</div>
<a href="/Admin/UserAdmin/ImageUpload/#Model.Id" class="btn avatarUpload">Upload New
Image</a>
</div>
</div>
</div>
<div class="control-group formSep">
<label for="FirstName" class="control-label">
First Name</label>
<div class="controls">
#Html.TextBoxFor(u => u.FirstName, new { #class = "input-xlarge" })
</div>
</div>
<div class="control-group formSep">
<label for="FirstName" class="control-label">
Last Name</label>
<div class="controls">
#Html.TextBoxFor(u => u.LastName, new { #class = "input-xlarge" })
</div>
</div>
<div class="control-group formSep">
<label for="u_email" class="control-label">
Email Address</label>
<div class="controls">
#Html.TextBoxFor(u => u.EmailAddress, new { #class = "input-xlarge" })
</div>
</div>
<div class="control-group formSep">
<label for="u_email" class="control-label">
Telephone Number</label>
<div class="controls">
#Html.TextBoxFor(u => u.TelephoneNumber, new { #class = "input-xlarge" })
</div>
</div>
<div class="control-group formSep">
<label for="u_email" class="control-label">
Mobile Number</label>
<div class="controls">
#Html.TextBoxFor(u => u.MobileTelephoneNumber, new { #class = "input-xlarge" })
</div>
</div>
<div class="control-group formSep">
<label for="u_email" class="control-label">
Mobile Number</label>
<div class="controls">
#Html.TextBoxFor(u => u.MobileTelephoneNumber, new { #class = "input-xlarge" })
</div>
</div>
<div class="control-group formSep">
<label for="u_email" class="control-label">
Is Instructor</label>
<div class="controls">
#Html.CheckBox("cbIsInstructor", isInstructor)
</div>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-gebo" type="submit">
Save changes</button>
</div>
</div>
</fieldset>
}
</div>
</div>
</div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"
type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/plugins/jcrop/jquery.Jcrop.min.js")" type="text/javascript"></script>
<script src="#Url.ContentArea("~/Scripts/plugins/fineUploader/util.js")"></script>
<script src="#Url.ContentArea("~/Scripts/plugins/fineUploader/button.js")"></script>
<script src="#Url.ContentArea("~/Scripts/plugins/fineUploader/handler.base.js")"></script>
<script src="#Url.ContentArea("~/Scripts/plugins/fineUploader/handler.form.js")"></script>
<script src="#Url.ContentArea("~/Scripts/plugins/fineUploader/handler.xhr.js")"></script>
<script src="#Url.ContentArea("~/Scripts/plugins/fineUploader/uploader.basic.js")"></script>
<script src="#Url.ContentArea("~/Scripts/plugins/fineUploader/dnd.js")"></script>
<script src="#Url.ContentArea("~/Scripts/plugins/fineUploader/uploader.js")"></script>
<script src="#Url.ContentArea("~/Scripts/plugins/fineUploader/jquery-plugin.js")"></script>
<script>
$(function () {
loadUserAvatar();
$('.avatarUpload').colorbox({
initialHeight: '520',
initialWidth: '650',
iframe: false,
opacity: 0.45,
onClosed: function () {
loadUserAvatar();
}
});
$('.resetPasswordWindow').colorbox({
initialHeight: '0',
initialWidth: '0',
iframe: false,
opacity: 0.45,
onClosed: function () {
},
onComplete: function () {
$.validator.addMethod("passwordsMustMatch", function (value, element) {
return $('#validatePassword').val() == $('#password').val();
}, "The passwords do not match");
$('.resetPasswordForm').validate({
onkeyup: false,
errorClass: 'error',
validClass: 'valid',
errorPlacement: function (error, element) {
error.appendTo(element.closest("div.controls"));
},
highlight: function (element) {
$(element).closest("div.control-group").addClass("error f_error");
var thisStep = $(element).closest('form').prev('ul').find('.current-step');
thisStep.addClass('error-image');
},
unhighlight: function (element) {
$(element).closest("div.control-group").removeClass("error f_error");
if (!$(element).closest('form').find('div.error').length) {
var thisStep = $(element).closest('form').prev('ul').find('.current-step');
thisStep.removeClass('error-image');
};
},
rules: {
password: { required: true, minlength: 6, passwordsMustMatch: true },
validatePassword: { required: true, minlength: 6, passwordsMustMatch: true }
},
invalidHandler: function (form, validator) {
$.sticky("There are some errors. Please corect them and submit again.", { autoclose: 5000, position: "top-right", type: "st-error" });
}
});
}
});
});
function loadUserAvatar(parameters) {
$.ajax({
url: '/Admin/Avatar/AvatarLoad/#Model.Id',
type: 'POST',
cache: false,
timeout: 100000,
error: function (xhr, status, error) {
alert(error + " " + status);
},
success: function (data) {
$("#userAvatar").attr("src", data.Image.ThumbNailRelativePath);
}
});
}
function OnSuccess(parameters) {
$.sticky("The user profile has been updated successfully.", { autoclose: 5000, position: "top-right", type: "st-error" });
}
function OnFailure(parameters) {
$.sticky("There was an error saving the profile. </br>" + parameters.message, { autoclose: 5000, position: "top-right", type: "st-error" });
}
</script>
UPDATE:
After a little research at what as happening, I was getting this error after the post: An item with the same key has already been added
You can't bind directly to Collections - see ASP.NET Wire Format for Model Binding to Arrays, Lists, Collections, Dictionaries for examples of how to accomlish what you are trying to do.
Well, i figured out the issue. Kind of silly really. The issue was I had an interface on my Model. There were 2 version of the property Username. One was named UserName (with a capital N) and the other was Username (lowercase n). This blog post helped.