C# Variable To JavaScript - asp.net-mvc-3

<index>
<div>
string selectedvalue="";
// Coding Part
</div>
<script type="text/javascript">
function onchangeFT(e)
{
'#selectedvalue'= e.value; //e.value come form combobox and it is should be assigned to "selectedvalue"
alert('#selectedvalue');
}
</script>

<script type="text/javascript">
var selectedvalue="";
function onchangeFT(e)
{
selectedvalue = e.value; //e.value come form combobox and it is should be assigned to
alert(selectedvalue);
}
</script>

Related

Pass value of input to v-model

how to pass automatticly the value of the input into the v-model ?
Thank you :)
Code :
<input value="{{$in->id}}" v-model="upload.id" >
i tried to do in my script :
upload: {
bank:'',
id:{{$in->id}},
cash:''
},
and in my view :
<a value="" v-model="upload.id" ></a>
You can't do it that way as v-model overrides the value attribute on the input element. So probably the best option would be to add this straight to your script tag.
<script type="text/javascript>
new Vue({
data: {
upload {
id: {{$in->id}}
}
}
});
</script>
Or, if you are initiating VueJS within it's own javascript file, instead of inline you could set it as a property on the window. For example, in your <head> you can do the following:
<head>
...
<script type="text/javascript">
window.sharedData = window.sharedData || {};
window.sharedData.uploadId = {{$in->id}};
</script>
...
</head>
This means in your javascript file you could then do the following:
data: {
upload: {
in: window.sharedData.uploadId
}
}

calling a page with ajax based on url parameter

please can anyone help me with this problem that i've encountered. i'm able to capture a url parameter with javascript and i want to add it to my jquery code which calls a page in a div but i'm able to do it. here's my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function urlink()
{
var tlink = window.location.search.substring(1);
}
jQuery(function($){
$('#mydiv').load('real_news.asp?'+ urllink());
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function urlink()
{
return window.location.search.substring(1);
}
jQuery(function($){
$('#mydiv').load('real_news.asp?'+ urllink());
});
</script>

jQuery multiple tabs + validation select does not fire (MVC3/Razor/VB)

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.

MVC3, Ajax and a modal form with client-side unobtrusive validation

I can't get the combination of things in the title to work together. I've read various questions but not found one that covers everything I'm trying to do.
I'm using jqModal for my modal window. I'm using Ajax.BeginForm. My models are decorated with [Required], [Display(...)] etc.
This stuff is all being placed on a page using #Html.RenderAction(...)
Depending on whether I use OnBegin or OnComplete in the ajax call, I either get no client-side validation (the update just doesn't take), or the modal gets stuck in a state where the whole page is "modalled out" without a dialog in place. But actually what I want is for the modal to stay in place if there is either a client or server side validation error.
The site does not require any functionality to work without javascript being available/enabled.
head:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/jquery.cleditor.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/jqModal.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.6.1.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.cleditor.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.timeago.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jqModal.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/functions.js")"></script>
The model:
public class ReplacedTextModel {
public ReplacedTextModel() { }
public ReplacedTextModel(int id, string text, string replaced) {
Id = id;
Text = text;
Replaced = replaced;
}
public int Id { get; set; }
[Required, Display(Description = "The text of the question", Prompt = "Please enter the question text."), UIHint("MultilineString")]
public string Text { get; set; }
public string Replaced { get; set; }
}
The editor template (this contains some extension methods but they're not relevant to the problem, so please ignore):
#model string
<div class="form-element">
#Html.Label("", new Dictionary<string, object> { { "title", Html.Description("") } })
#if (Html.IsRequired()) {
<span class="form-required">*</span>
}
<div class="form-control">
#Html.TextArea("", Model, new Dictionary<string, object> { { "title", Html.Prompt("") } })
<div class="form-validation">
#Html.ValidationMessage("")
</div>
</div>
</div>
The view (there may be many of these on a page, and they may be repeated, so I'm using the Guids for uniqueness):
#model ReplacedTextModel
#{
var id = Guid.NewGuid().ToString("N");
var windowId = "id_" + id + "_window";
var triggerId = "id_" + id + "_trigger";
var replaceId = "id_" + id + "_replace";
var functionId = "id_" + id + "_closeForm";
}
<div id="#replaceId">
#Html.Raw(Model.Replaced)
<span class="edit-mode"><a id="#triggerId" href="#">edit</a></span>
<div id="#windowId" class="jqmWindow" style="display: none">
#using (Ajax.BeginForm("Text", new AjaxOptions { UpdateTargetId = replaceId, OnBegin = functionId, HttpMethod = "POST" })) {
#Html.HiddenFor(x => x.Id)
#Html.EditorFor(x => x.Text)
<input type="submit" value="Save" />
}
<div>Cancel</div>
</div>
<script type="text/javascript">
$(function () { $("##windowId").jqm({ trigger: "##triggerId" }); });
function #(functionId)() {
// THIS IS A PROBLEM
// if it's not called or is called on OnBegin then the modal doesn't close properly
// if OnComplete is used, the dialog disappears but the validation doesn't work
// in either case, validation failure on backend (try posting whitespace) doesn't show validation errors.
$("##windowId").jqmHide();
};
</script>
</div>
The controller methods:
public ActionResult Text(int id) {
return PartialView("Text", ReplacedTextModel.Get(id));
}
[HttpPost]
public ActionResult Text(int id, string text) {
if (ModelState.IsValid) {
try {
if (string.IsNullOrWhiteSpace(text)) throw new ArgumentException("No text was provided for the question.", "text");
ReplacedTextModel.Update(id, text);
} catch (Exception ex) {
ModelState.AddModelError(ex);
}
}
return Text(id);
}
Sorry for the long post, but I've seen others mention that it's not a bad thing! Happy to post any additional code/info if requested. I may have missed something as I have copy/pasted from a few locations in the project.
Thanks in advance.

Razor syntax to render section based on condition

I got a view with Layout defined. In the layout, there is a section:
#RenderSection("JavaScript", required: false)
In the view, based on a condition, I want to either render certain JavaScript to the section or not.
#if (condition)
{
#section JavaScript
{
<script type="text/javascript>
$(document).ready(function(){
//bla...
});
</script>
}
}
The above syntax is wrong. What's the correct syntax?
Edit
Basically, I got a partial view which needs to be rendered based on a condition. If the condition is true, then I need to render the partial view together with some JavaScript for the partial view, which I want to go to the "JavaScript" section. How can I do that?
#section blocks can only appear in markup contexts.
You can write
#if (condition)
{
<text>
#section JavaScript
{
<script type="text/javascript>
$(document).ready(function(){
//bla...
});
</script>
}
</text>
}
#if(condition) RenderSection(..)
#Section Javascript{
<script type="text/javascript>
$(document).ready(function(){
//bla...
});
</script>
}
or in your layout:
#RenderSection(..)
and in your view:
#section Javascript{
if(condition)
{
<script type="text/javascript">
$(document).ready(function () {
//bla...
});
</script>
}
}
also see:
Is there a way to make a #section optional with the asp.net mvc Razor ViewEngine?

Resources