Develop Reference

ASP.NET MVC C# - Pass dynamic parameter using URL ACTION

How can I pass the value of my textbox "R_endDate" from my VIEW to my controller ExportToExcel function using Url.Action ?
On my View: Index.cshtml
I have this textbox with value of date.
<div class="uk-form-row">
<label class="uk-form-label" for="R_endDate">Ending Date:</label>
<div class="uk-form-controls">
#Html.TextBoxFor(m => m.R_endDate, new { #class = "uk-form-small uk-text-left required", #maxlength = 12, #data_uk_datepicker = "{format: 'MM/DD/YYYY'}" })
</div>
</div>
I have this anchor tag with url action.
Export
On my Controller: MISReportController.cs
public FileContentResult ExportToExcel()
{
byte[] filecontent = ExcelExportHelper.ExportExcel(list, "Technology", true, strAddtional);
return File(filecontent, ExcelExportHelper.ExcelContentType, strTitle);
}
my scripts
error1

You can easily handle this using javascript/jquery.
UI:
<a id="aExportToExcel" href="#" class="uk-button uk-button-small uk-text-center uk-text-small ">Export</a>
Script:
<script type="text/javascript">
$(document).ready(function () {
$("#aExportToExcel").click(function () {
var param = $("input[name='R_endDate']").val();
var _url = '#Url.Action("ExportToExcel", "MISReportController", new { param = "XXX" })'; // Param is the example parameter name. Change as needed.
_url = _url.replace("XXX", param); // _url will contain your url string so you can just play with it as needed for your requirement.
window.open(_url, "_blank");
});
});
</script>

try using html helper beginform()
in index.cshtml
#using (Html.BeginForm("ExportToExcel", "MISReport")) {<div class="uk-form-row">
<label class="uk-form-label" for="R_endDate">Ending Date:</label>
<div class="uk-form-controls">
#Html.TextBoxFor(m => m.R_endDate, new { #class = "uk-form-small uk-text-left required", #maxlength = 12, #data_uk_datepicker = "{format: 'MM/DD/YYYY'},#name="date" })</div></div>}
in the controller
[HttpPost]public FileContentResult ExportToExcel(Datetime date){ .......
}

How to add switch control to mvc application?

I need to add switch control to my web application.
I'm trying to use Kendo Switch control.
I want to bind my switch to a model property.
I do that with a following way:
<div class="form-group">
#Html.Label("Guest Mode:")
<label class="checkbox-inline">
#Html.CheckBoxFor(m => m.SomeProperty, new {#id = "switch"})
</label>
</div>
<script>
var switchInstance = $("#switch").kendoMobileSwitch();
</script>
I tried many ways but can not render so simply control properly (see my screenshot).
Also I tried to use only razor syntax but it rendered only a checkbox.
What is my problem and how to fix it?
Thanks for advance!

I've done it like that. The goal is to switch on/off 'disabled' attribute for some text fields. In my case this way works just fine. I hope it's useful.
In the label tag 'for' is the binding with model property method. Checkbox is bound with the model by Html helper.
<div class="custom-control custom-switch">
#Html.CheckBoxFor(m => m.Enabled, new { #class = "custom-control-input" })
<label class="custom-control-label" for="Enabled">Disable</label>
</div>
and next is jQuery script:
#section Scripts {
<script type="text/javascript">
$(document).ready(DOM_Load);
function DOM_Load(e) {
$('[data-toggle="popover"]').popover({
container: "body"
});
$("div.custom-switch").children("input").on("change", EnabledToggle_Change);
}
function EnabledToggle_Change(e) {
var inputs = $("div.container-fluid").find("input[type!='checkbox']");
var textareas = $("div.container-fluid").find("textarea");
var switchLabel = $("div.custom-switch").children(".custom-control-label");
switchLabel.text(switchLabel.text() == 'Disable' ? 'Enable' : 'Disable');
inputs.prop('disabled', (i, v) => !v);
textareas.prop('disabled', (i, v) => !v);
}
</script>
}

Add Validation Rules Dynamically to MVC3

All,
I need to add validation rules to dynamic form input text elements added by the user.
I am accomplishing this by cloning a chunk of HTML, providing unique ids and adding to the DOM
I researched the syntax for this, which I believe is correct yet I am getting the following JS error when I try to access the .rules method:
TypeError: $(...).rules is not a function
Caused by this:
$("input[type=text].validateRequired").each(function () {
$(this).rules("add", { required: true, messages: { required: "Data is missing" }
});
});
When I examine $(this) in FireBug, I do not see a .rules method yet it exists in the validation scripts and all of the documentation shows that the method should be available globally. Not sure how to get it in scope.
Here are the code pieces in the View related to this problem:
JS Includes
<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 src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
JS Method that creates the dynamic form elements
<script type="text/javascript">
$(document).ready(function() {
var uniqueId = 1;
var ctr = 1;
$(function() {
$('.js-add-cosponsor-hyperlink').click(function() {
var copy = $("#cosponsorsTemplate").clone(true).appendTo("#addCosponsorSection").hide().fadeIn('slow');
var cosponsorDivId = 'cosponsors_' + uniqueId;
var copyText = copy.html();
copyText = copyText.replace(/Guitar1/g, 'Guitar' + ctr);
copyText = copyText.replace('Guitar_1', 'Guitar_' + ctr);
copy.html(copyText);
$('#cosponsorsTemplate').attr('id', cosponsorDivId);
var deleteLink = copy.find("a.icon.delete");
deleteLink.on('click', function() {
copy.fadeOut(300, function() { $(this).remove(); }); //fade out the removal
});
$.validator.unobtrusive.parse(form);
$("input[type=text].validateRequired").each(function () {
var t = $(this);
$(this).rules("add", { required: true, messages: { required: "Data is missing" } });
});
uniqueId++;
ctr++;
});
});
});
</script>
*The Form*
#using (Html.BeginForm())
{
[...]
<!-- Template used to do the Clone: These need dynamic validation -->
<div style="display:none">
<div id="cosponsorsTemplate">
<div class="formColumn1"><label>Guitar</label></div>
<div class="formColumn2">#Html.TextBoxFor(model => model.Guitar1.Make, new { Placeholder = "Make", Class = "validateRequired" })
<div class="messageBottom">
#Html.ValidationMessageFor(model => model.Guitar1.Make)
</div>
</div>
<div class="formColumn3">#Html.TextBoxFor(model => model.Guitar1.Model, new { Placeholder = "Model" , Class = "validateRequired"})
<div class="messageBottom">
#Html.ValidationMessageFor(model => model.Guitar1.Model)
</div>
</div>
<div class="formColumn4">#Html.TextBoxFor(model => model.Guitar1.ProductionYear, new { Placeholder = "Production Year", Class = "validateRequired" })
<div class="messageBottom">
#Html.ValidationMessageFor(model => model.Guitar1.ProductionYear)
</div><a class="icon delete">Delete</a>
</div>
</div>
</div>
<!-- End Add Co-Sponsor Row Template -->
}

You are cloning a chunk of HTML so every time you do a clone you need to parse the whole form
by using $.validator.unobtrusive.parse

Jquery template anchor tag click

SO i have this jquery template and i need to call a jquery or javascript function on the click of this anchor tag. Ive tried it a few different ways.
<a href="yourfunction()"
Ive tried
$('#number').click(function(e){
So if anyone could help it would be highly appreciated. The anchor tag in question is the phone number one with the id of number.
#model OpenRoad.Web.Areas.Marketing.Models.MobyNumberSelectionModel
#{
ViewBag.Title = "Moby Number Selection";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section scripts {
<script type ="text/javascript">
$('#number').click(function (e) {
alert('test');
});
});
mixpanel.track("View Marketing | Moby | Number Selection");
//$(document).on("click", "#number", function (e) {
// event.preventDefault();
// alert('test'); });
//$('#number').click(function (e) {
// Alert('test');
//});
</script>
}
<label class="lgform" style="text-align: left; padding: 10px 0;">Select state and area code:</label>
#Html.DropDownListFor(m => m.State, OpenRoad.Web.Helpers.DropDownLists.GetOptionValues("States", Model.State),
new { #class = "ddtrigger", data_url = "/Marketing/Moby/GetAreaCodes", data_template = "areaCodeTemplate", data_target = "AreaCode" })
#Html.DropDownListFor(m => m.AreaCode, (IEnumerable<SelectListItem>)ViewData["AreaCodes"],
new { #class = "ddtrigger", data_url = "/Marketing/Moby/GetPhoneNumbers",
data_template = "phoneNumberTemplate",
data_target = "phoneNumbers",
data_listtarget="true" })
#Html.HiddenFor(m => m.MobyNumber)
<script id="areaCodeTemplate" type="text/x-jquery-template">
<option value="${AreaCode}">${AreaCode}</option>
</script>
<br />
<script id="phoneNumberTemplate" type="text/x-jquery-template">
<div class="numberselectbox">
<strong>${FormattedPhoneNumber}</strong> Select<br/>
</div>
</script>
<div id="phoneNumbers">
</div>

Since you are using a template to generate the elements, these elements will be dynamic so you need to use delegated event model.
Also since it is a template, do not use static id for the elements since the elements can be duplicated - use class attribute instead
<script id="phoneNumberTemplate" type="text/x-jquery-template">
<div class="numberselectbox">
<strong>${FormattedPhoneNumber}</strong> Select<br/>
</div>
$(document).on('click', '.number', function(){
//do something
})

You could try jQuery's on() method or click() shorthand:
$(document).ready( function() {
$('#number').on('click', function(e){
// your method implementation here
e.preventDefault();
});
// OR //
$('#number').click(function(e){
// your method implementation here
e.preventDefault();
});
});

Form default value not wanted after ajax submission

I have this script, what it intends to do is: in a view with a list of contacts, each one with a edit link whenever you click on one of these links it displays an edit form in a partial view (there's only one div in the parent view for holding it) just below the clicked contact, for that it does a get ajax call to the server and gets the information for that contact. After submitting, via ajax as well, it refreshes the list.
Everything seems to work fine, but if I edit a contact, after the list being refreshed I try to open again the form on the same contact and the information is the same as it was before being edited. Although debugging I see the list for the server is correct (and so is the display in the list, it's only wrong in the form)
Thing is that in chrome developer tool I can see the form with some "default values" set to the previous stuff. I didn't know about them till now and I don't know how to get rid of them, because to my understanding I'm making a get call to the server, anyway I have tried this
document.getElementById("editForm").reset();
with no luck.
Thanks
The script
(function ($) {
var editContainer = $(document.getElementById('editContainer'));
$('#editContainer').on('submit', '#editForm', ajaxEditCall);
$('a.edit').on("click", displayEditForm);
function displayEditForm(e) {
var clickedElement = $(this).parent(),
url = editContainer.data('amp-edit-url');
$.get(url, {
id: parseInt(this.id, 10)
}, function (result) {
editContainer.html(result);
$.validator.unobtrusive.parse(editContainer);
// Display edit form just below the "item" clicked
if (editContainer.is(":visible")) {
editContainer.slideToggle(300, function () {
editContainer.appendTo(clickedElement);
editContainer.slideToggle(300);
});
} else {
editContainer.appendTo(clickedElement);
editContainer.slideToggle(300);
}
}, "html");
e.preventDefault();
}
function ajaxEditCall(e) {
e.preventDefault();
//if ($('#editForm').valid()) {
var list = $(document.getElementById('list'));
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.passedValidation == true) {
$.get(result.action, function (partial) {
document.getElementById("editForm").reset();
list.html(partial);
$('a.edit').on("click", displayEditForm);
$('#editForm').slideUp(300);
setTimeout(function () {
list.effect("highlight", {}, 3000);
}, 1000);
});
} else {
$(document).scrollTop(0);
editContainer.html(result);
$.validator.unobtrusive.parse('#editForm');
}
}
});
//} return false;
}
}(jQuery));
And the view in case is relevant
#model ContactListViewModel
#{
ViewBag.Title = " My Contacts";
}
<div id="myContacts">
<h2>My Contacts</h2>
<div id="editContainer" data-amp-edit-url="#Url.Action("Edit", "Contacts")" class="initiallyHidden"></div>
<div id="list">
#{ Html.RenderPartial("_ContactList", Model); }
</div>
<div id="dialog" data-amp-del-url="#Url.Action("Delete", "Contacts")" title="Confirmation Required">
<p>Are you sure you want to delete this Contact?</p>
</div>
</div>
#section Foot
{
<script src="~/Scripts/AMPContacts.js"></script>
<script src="~/Scripts/conditional-validation.js"></script>
<script src="~/Scripts/Placeholders.min.js"></script>
}
Well that's obviously the parent view, the partial one is just a bunch of fields, I remove most of them to avoid increase the already long post
#model AddContactViewModel
#using (Html.BeginForm("Edit", "Contacts", FormMethod.Post, new { #id = "editForm", #class = "addTab" }))
{
#Html.ValidationSummary(true, "Please correct the errors and try again.")
#Html.HiddenFor(m => m.Id)
#Html.HiddenFor(m => m.OwnedItemId)
#Html.HiddenFor(m => m.AddressId)
<div id="editContactDetails">
<div>
#Html.DisplayFor(m => m.PlanName)
</div>
<div>
#Html.DropDownListFor(m => m.Title, Model.TitleList, "Title")
</div>
<div>
#Html.EditorFor(m => m.FirstName, new { #id="editFirstName", data_placeholders_focus = "false", placeholder = ViewData.ModelMetadata.Watermark })
#Html.ValidationMessageFor(m => m.FirstName)
</div>
// And so on....
<div class="addDEC">
<input class="addDECButton" type="submit" value="Save" />
</div>
}

I ran into this problem with a site I was working on. You'll need to disable your ajax caching:
//Disbable cache for all jQuery AJAX requests
$.ajaxSetup({ cache: false });
That will do it for all ajax calls, so you may only want to do that on certain pages, depending on your usage.