Im having some trouble getting Ajax.ActionLink to work how I expect.
In /views/layout/_Layout.cshtml I load the following scripts
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
In /views/home/index.chstml I have
#Ajax.ActionLink("Check Status", "GetStatus", new AjaxOptions { UpdateTargetId = "status", HttpMethod = "GET", InsertionMode = InsertionMode.Replace })
<div id="status">
Status
</div>
And in controllers/HomeController I have
public string GetStatus()
{
return "Status ok " + DateTime.Now;
}
When I click the button it takes me to /home/GetStatus And displays Status Ok and the current date and time.
I expected it to simply update the Div area
So I found the solution here Weblogs.asp.net For anyone else with this problem check the page as it offers multiple fixs. I basiclly left out reference to a javascript lib.
Related
I have a PartialView, that contains grid. The grid has a list of files that can be deleted. After user deletes the file I return PartialView with new file list.
Issue:
The new screen contains ONLY the PartialView. The MenuItems and all other things on the page are NOT rendered.
Any help highly appreciated. Thank you...
MY code:
Sellers.cshtml
'ACSDemoWinAzureACS.Models.SellersModel
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-2.1.0.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<div id="gridContainer">
#Html.Partial("_AdminView", Model)
</div>
'
_AdminView.cshtml - The PartialView
#model ACSDemoWinAzureACS.Models.HomeModel
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-2.1.0.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<div id="gridMain">
#using (Html.BeginForm("Admin", "Home", new { enctype = "multipart/form-data" }))
{
foreach(var file in Model.files)
{
<tr>
<td> #file.FileName</td>
<td>#Ajax.ActionLink("Delete" , "Delete" , "Home",
new { id = file.FileName },
new AjaxOptions
{
UpdateTargetId="gridMain", // <-- DOM element ID to update
InsertionMode = InsertionMode.Replace, // <-- Replace the content of DOM element
HttpMethod = "GET" // <-- HTTP method
})
</td>
</tr>
}
}
</div>
HOmeController.cs
public PartialViewResult Delete(string id)
{
_model.Delete(id);
_model.files = _model.GetFiles();
return PartialView("_AdminView",_model);
}
I've used a solution here (which I've fiddled here) for restricting submission of a form until all required fields are filled.
The problem is when I run on my MVC3 project, as I've observed on Firebug, it stops starting at the third line of the following block. Because of it, the solution doesn't work.
var validator = $("#myForm").validate();
var tabs = $("#tabs").tabs({
select: function(event, ui) { // Here.
// The following lines are not executed.
var valid = true;
var current = $(this).tabs("option", "selected");
var panelId = $("#tabs ul a").eq(current).attr("href");
Can somebody tell me why my project won't run the rest of the script and what I should do to fix it? Thanks!
In my View file
#ModelType SLC.Models.RegisterModel
// downloaded with NuGet
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var validator = $("#myForm").validate();
console.log(validator);
var tabs = $("#tabs").tabs({
select: function (event, ui) {
var valid = false;
var current = $(this).tabs("option", "selected");
var panelId = $("#tabs ul a").eq(current).attr("href");
$(panelId).find("input").each(function () {
console.log(valid);
if (!validator.element(this) && valid) {
valid = false;
}
});
return valid;
}
});
});
</script>
<link rel="stylesheet" href="#Url.Content("~/Content/themes/base/jquery-ui.css")" />
#Using Html.BeginForm("", "", Nothing, New With {.id = "myForm"})
#Html.ValidationSummary(True, "Account creation was unsuccessful. Please correct the errors and try again.")
#<div>
<div id="tabs">
<ul>
<li>1. Information</li>
<li>2. Information</li>
<li>3. Confirm</li>
</ul>
<div id="tab-1">
// Some fields...
</div>
<div id="tab-2">
// Some fields...
</div>
<div id="tab-3">
// Some fields...
<input type="submit" value="Register" />
</div>
</div>
</div>
End Using
In my Layout template file
<head>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
// downloaded with NuGet
<script src="#Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.10.0.js")" type="text/javascript"></script>
</head>
I found this:
The jQuery UI select method, in particular, is deprecated as of 1.10.0, so it's either back to UI 1.9.2 or a code rewrite.
I am using Ajax Form in my page , I have couple of AJAX forms in the page one --(Customers.cshtml) , and the other comes as PARTIAL VIEW (_customers.cshtml). When I Submit the Partial View. This PARTIAL VIEW IS submitting multiple times**
I am using the following Ajax script in main page and also in Partial View
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"
My code follows like this :
Customers.cshtml replaces the div tag with id="customers"
---------------------------------------------------------------------
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>
#if (false)
{ <script src="~/Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script> }
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
#using (Ajax.BeginForm("Action1", "Controller1", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "customers" }))
{
#Html.AntiForgeryToken()
<input type="submit" class="t-button t-state-default"/>
}
<div id="customers"> </div>
<div id="Orders"></div>
<div id="customers> tag is replaced with a partial view which has another AJAX FORM
**_customers.cshtml replaces the div tag with id="orders"**
--------------------------------------------------------
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
#using (Ajax.BeginForm("Action2", "Controller1", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "Orders" }, new { id = "formupdate" }))
{
#Html.AntiForgeryToken()
<input type="submit" class="t-button t-state-default"/>
}
Now when I try to submit the **_customers.cshtml** , it is submitting more than once
<br/>
Controller
-----------------------------------------------
[HttpPost]
public ActionResult Action1()
{
return PartialView("_customers");
}
[HttpPost]
public ActionResult Action2()
{
return PartialView("_Shipping");
}
Use this java libraries:
<script src="#Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
I try to use jQueryUIHelpers.Mvc3 but when i click on the box the datebox picker not appear.
I installed the jqueryUIHelpers.Mvc 3 package like here http://jqueryuihelpers.apphb.com/Docmo/Overview/GettingStarted
But when i am running the page and click the date box nothing appears.
Here is my view:
#model MvcApplication4.Models.Reservation
#using JQueryUIHelpers
#{
ViewBag.Title = "Create";
}
<head>
<h2>Create</h2>
<title>jQuery UI Helpers - #ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.18.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.unobtrusive.min.js")" type="text/javascript"></script>
</head>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Reservation</legend>
<div>
<label for="anotherDate">Select another date: </label>
#(Html.JQueryUI().Datepicker("anotherDate").MinDate(DateTime.Today).ShowButtonPanel(true)
.ChangeYear(true).ChangeMonth(true).NumberOfMonths(2))
</div>
May be it is because you have called jquery after the validate js and an error occurred and script stopped functioning. Check your error console and include jquery-1.7.1.min.js before all other jquery plugin js and try again. I didnt find any error in the datepicker initialisation function.
I believe it is because when you run Install-Package jQueryUIHelpers.Mvc3 the current version installs ~/Scripts/jquery-ui-1.8.19.min.js and ~/Scripts/jquery-1.7.2.min.js. However, the demo code references version ~/Scripts/jquery-ui-1.8.18.min.js and ~/Scripts/jquery-1.7.1.min.js which is the version you have used. Unless you have manually installed this file, you will not be referencing the correct version.
I am working with ASP.NET MVC 3 (Razor)
I loaded a partial view by holds a form by clicking on Ajax Link that is located on my view as follows
#Ajax.ActionLink("Students List", "Create", "Student", new AjaxOptions {OnSuccess = "updatePlaceholder", UpdateTargetId = "holder" })
The partial view loads properly, but I discovered that the Telerek DatePicker isn't showing when I click on the button to bring it down
and also client side validations arent working also. I followed the approch described here but it still insn't working
http://www.telerik.com/help/aspnet-mvc/using-with-partial-views-loaded-via-ajax.html
My code is below
HERE IS MY VIEW
#Ajax.ActionLink("Students List", "Create", "Student", new AjaxOptions {OnSuccess = "updatePlaceholder", UpdateTargetId = "holder" })
function updatePlaceholder(context) {
// the HTML output of the partial view
var html = context.get_data();
// the DOM element representing the placeholder
var placeholder = context.get_updateTarget();
// use jQuery to update the placeholder. It will execute any JavaScript statements
$(placeholder).html(html);
// return false to prevent the automatic update of the placeholder
return false;
}
HERE IS MY PARTIALVIEW
#model MyUniversity.Models.Student
#using (Ajax.BeginForm(new AjaxOptions {UpdateTargetId="holder"}))
{
#Html.ValidationSummary(true)
Student
#Html.Telerik().DateTimePicker().Name("EnrollmentDate").Value(DateTime.Now.ToString())
#Html.ValidationMessageFor(model => model.EnrollmentDate)
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
#Html.ActionLink("Back to List", "Index")
Here is my _Layout.cshtml with the registered scripts
#ViewBag.Title
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftAjax.debug.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js")" type="text/javascript"></script>
#(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.telerik.css").Combined(true).Compress(true)))
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
#(Html.Telerik().ScriptRegistrar().Globalization(true).DefaultGroup(group => group.Combined(true).Compress(true)))
I have partial view that is loaded without Ajax. I had trouble making both the validation and Telerik datepicker popup to work. On my partial view I added the three scripts for validation:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
But with this the popup wouldnt work, so I added these scripts to my _layout.cshtml just before:
#Html.Telerik().ScriptRegistrar()
I had already registered the following scripts on the _layout.cshtml page on the top:
<script src="#Url.Content("~/Scripts/MicrosoftAjaxTemplates.debug.js")" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/ui/jquery.ui.core.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/ui/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.tabs.js")" type="text/javascript"></script>
<!-- Telerik Extensions for MVC Scripts -->
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.combobox.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.editing.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.filtering.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.grouping.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.reordering.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.resizing.min.js")" type="text/javascript"></script>
<script src="../../Scripts/2011.2.712/telerik.datetimepicker.min.js" type="text/javascript"></script>
<script src="../../Scripts/2011.2.712/telerik.datepicker.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
After that all seems to work fine.