I am working on a Scorm MVC project. Basically I need to update a partial view from a cs class file.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Table of Contents Test</h2>
<br />
<div id="SCONavBar">
<% XElement item = (XElement) Model;
String rootID = (String) ViewData["courseRoot"];
String resource = (String) ViewData["resource"]; %>
<button id="prev" onclick="javascript:NavigationRequest('', '<%: resource %>', 'previous');">Previous</button>
<button id="cont" onclick="javascript:NavigationRequest('', '<%: resource %>', 'continue');">Continue</button>
<button id="start" onclick="javascript:NavigationRequest('', '<%: resource %>', 'start');">Start Course</button>
</div>
<div id="scoContainer">
<div id="treeContainter" style="display:inline-block; outline:black solid 1px; height:600px; width:300px; overflow:scroll; padding:2px;">
<ul id="treeview">
<% Html.RenderPartial("~/Views/Content/ActivityTreeUserControl.ascx", item); %>
</ul>
</div>
<div id="contentContainer" style="vertical-align:top; display:inline-block; outline:black solid 1px;">
<% Html.RenderPartial("~/Views/Content/ContentFrame.ascx"); %>
</div>
</div>
<script type="text/javascript" src="../../Scripts/TreeView/TOCControlScript.js"></script>
<script type="text/javascript" src="../../Scripts/TreeView/resizeFrame.js"></script>
<script type="text/javascript" src="../../Scripts/Scorm/loungeScormMethods.js"></script>
<script type="text/javascript">
$(document).ready(function () {
startTree();
});
</script>
</asp:Content>
Above is the code for my view. On first load it loads a table of contents partial view and an Iframe partial view. When clicking my personal Start, Cont and Prev buttons, an AJAX request goes through a sequencer and returns the link to the next piece of content and updates the source of the iframe in javascript. This works fine.
Javascript
function sendToFrame(source) {
window.frames.SCODisplay.location.href = source;
}
function NavigationRequest(id, resource, type) {
var result = null;
$.ajax({
type: 'POST',
url: '/Content/NavigationRequest/',
data: {type : type},
async: false,
success: function (data) {
result = data;
}
});
if (result != null && result != "") {
var source = "../Content/" + resource + "/" + result;
sendToFrame(source, id)
}
}
Now the content can sometimes be navigated via buttons internally to the content. The content calls an API wrapper which sends to a data model the fact that after it terminates a continue request must be followed. Which works ok.
Now my problem is that on terminate my systems knows that a continue request is needed, it figures out what the next piece of content is and its link. I need to find a way to update the source of iframe from here....
public static String Terminate() {
//set entry to "" or resume, available to next learner session in current learner attempt
//if exit is set to suspend via nav request suspend all then entry set to resume upon next attempt on activity
//if exit anything other than suspend or no value set entry to ""
//when exit = suspend - save cmi.suspend_data to session
//decide whether to persist data
//save info to db using entities then call commit()
cocdType cmi;
try {
cmi = (cocdType)HttpContext.Current.Session["cmi"];
} catch {
return "false";
}
if (cmi.adlNavRequest != "_none_") {
SeqObject seqObj = new SeqObject();
seqObj.currentRequestType = SeqObject.type.Navigation;
seqObj.data.Navigation = cmi.adlNavRequest;
seqObj = loungeScormSeqNavHandler.SequencingProcess(seqObj);
NEED TO FIRE OFF IFRAME CHANGE SOURCE FROM HERE
}
return "true";
}
Does this make sense, any help is appreciated.
I have come up with a work around.
My terminate function returns the full link required for the iframe and in the original ajax call I have a simple if that determines if the result isnt true or false, blank or null then it must be a link then play with it from there. Then set result to true or false after.
Related
MVC4, downloaded TinyMCE.MVC : content of tinymce control need to be retrieved by Ajax call and set into that tinymce control. So far my attempts to set html content in tinymce control have failed. I have to use Ajax call. Is there way to do that?
Thank you.
VIEW:
<div id="divTinyMCE">
#Html.EditorFor(model => model.myContent)
</div>
<button type="button" id="btnGetContent" onclick="getContent()">Get Content</button>
#section scripts{
<script type="text/javascript">
function getContent() {
var parm1 = 1;
var parm2 = 2;
$.ajax({
type: "POST",
url: '/Home/GetContent',
data: { parm1: parm1, parm2: parm2},
success: function (data) {
alert("data from ajax = " + data.toString()); // data is html
//tinymce.set(data.toString()); // does not set anything
//tinymce.html(data); // does not set anything
$("#tinymce").html(data); // does not set anything
}
}); // AJAX call
}
</script>
}
CONTROLLER :
public ContentResult GetContent(int parm1, int parm2)
{
string contentFound = findContent(parm1); // contentFound is HTML string
return Content(contentFound);
}
I finally figured it out:
tinyMCE.activeEditor.setContent(data);
Hi friends,I am working on MVC 4 Razor and I am stuck in a situation
where Employee Personal Details form is to be filled in
steps(wizard)..for which i used jquery accordion control..for every
step i put an accordion..The html in each accordion section is
rendered from partial view through ajax call on every click of
respective accordion (i.e. <h3></h3> tag)..
On page load first/top accordion is active by default. My problem is
to restrict the user to click on next accordion until he/she fills the
presently active accordion correctly..
Here is my full code:
View:
#model XXX.ViewModels.PersonalDetailsViewModel
#{
ViewBag.Title = "PersonalDetails";
Layout = "~/Views/Shared/Template.cshtml";
}
#using (Html.BeginForm("Lifestyle", "Apply", FormMethod.Post, new { id = "personalDetailForm" }))
{
<div class="centerdiv margin_top20">
<div class="row">
#Html.ValidationSummary(true, "Please Correct the following errors:")
</div>
<div style="width: 1000px;">
<div id="Personalaccordion" class="acordion_div" style="padding: 10px; float: left;">
<h3 class="acordion_div_h3" onclick="javascript:PersonalModule.GetRenderingView('Apply/GetBasicDetailsView','personalDetailForm','BasicDetailsDiv');">
<p>
Basic Details<span id="BasicDetailsDivExp"></span>
</p>
</h3>
<div id="BasicDetailsDiv">
</div>
<h3 class="acordion_div_h3" onclick="javascript:PersonalModule.GetRenderingView('Apply/GetPersonalAddressView','personalDetailForm','PersonalAddressDiv');">
<p>
Address<span id="PersonalAddressDivExp"></span></p>
</h3>
<div id="PersonalAddressDiv">
</div>
</div>
<ul id="conlitue_ul" style="margin-top: 20px;">
<li style="margin-left: 140px;">
<input type="submit" class="compareBtn float_lt" value="Continue Buying >" id="continue" /></li>
</ul>
</div>
</div>
}
#Scripts.Render("~/bundles/PersonalDetails")
<script type="text/javascript">
PersonalModule.GetRenderingView('Apply/GetBasicDetailsView', '', 'BasicDetailsDiv');
</script>
My Controller:
public ActionResult PersonalDetails(int leadId)
{
var personalDetailsViewModel = LeadHelper.GetPersonalDetails(leadId);
return View(personalDetailsViewModel);
}
public ActionResult GetBasicDetailsView(PersonalDetailsViewModel personalDetailsViewModel)
{
if (personalDetailsViewModel.BasicDetails == null)
{
ModelInitializerHelper.InitilaizeBasicDetailsVModel(personalDetailsViewModel);
}
ModelInitializerHelper.InitializeBasicLookup(personalDetailsViewModel);
return PartialView("Personal/BasicDetails", personalDetailsViewModel);
}
public ActionResult GetPersonalAddressView(PersonalDetailsViewModel personalDetailsViewModel)
{
if (personalDetailsViewModel.PersonalAddressDetails == null)
{
ModelInitializerHelper.IntializePersonalAddressVModel(personalDetailsViewModel);
}
ModelInitializerHelper.InitializePersonalAddressLookup(personalDetailsViewModel);
return PartialView("Personal/PersonalAddress", personalDetailsViewModel);
}
My JS :
var PersonalModule = {
GetRenderingView: function (url, formId, containerID) {
var applicationurl = ApplicationRoot + '/' + url;
var objects = $('#BasicDetailsDivExp , #PersonalAddressDivExp' );
viewDivID = containerID;
GetAccordionView(applicationurl, formId, objects, containerID, 'accordion_plus', 'accordion_minus');
}
}
GetAccordionView: function (url, formId, objects, containerID, accordion_plus, accordion_minus) {
var formObjectData = null;
if (formId != undefined) {
formObjectData = $("#" + formId).serialize();
}
var renderView = function (data) {
$('#' + containerID).innerHtml = data;
}
ExpandAccordion(objects, containerID, accordion_plus, accordion_minus);
DoServerRequest(url, formObjectData, renderView);
}
ExpandAccordion: function (objects, spanIconID, accordion_plus, accordion_minus) {
var Objects = objects;
Objects.removeClass(accordion_minus);
Objects.addClass(accordion_plus);
$('#' + spanIconID + 'Exp').removeClass(accordion_plus).addClass(accordion_minus);
if (Browser.ie7) {
Objects.css("margin-top", "-22px");
}
}
DoServerRequest: function (url, data, funSuccess) {
$.ajax({
type: "POST",
url: url,
data: data,
async: false,
dataType: "json",
success: funSuccess,
error: function (errorResponse) {
if (errorResponse.readyState == 4 && errorResponse.status == 200) {
renderCurrentView(errorResponse.responseText)
}
else {
alert(errorResponse.responseText);
}
}
});
}
Please somebody help..I have heard lots of good thing about this forum
and this is my first Question...Thanks in advance..
I have removed my jquery validation attempt as it made the code
garbage thing Now I dont know what to write and where to write
If you are trying to validate data that has been added to form via Ajax after page load then you will need to use the rules method and add rules for these new elements. Jquery Validate has no way of knowing about them otherwise.
Example
Once you have loaded your new content via Ajax you need to find each element and add the necessary rules to them.
$('#yourDiv').find(".newElements").rules("add", {
required: true,
messages: {
required: "Bacon is required"
}
});
If you are using unobtrusive validate you may need to add your new elements to that also. See this SO question for more details.
Validating the Form
To check if the fields are valid, you will need to validate the form on click. This can be done using .validate(). You can then check if the form validated using .valid()
Example
$('#yourForm').validate();
if(!$('#yourForm').valid()) {
alert('Bacon is required');
}
I noticed that doing #Url.Action("myAction", new { param1 = 123, param2 = 456}) provides me with an invalid URL Home/myAction?param1=123¶m2=456.
I am attempting to do
$("#myAjaxDiv").load(url);
But only param1 is getting populated in the action method.
When I remove the & and make it just & then it works, but doing a string replace is super hacky.
url = url.replace("&", "&");
Am I missing something here?
EDIT: Per request I'm including some of my sample app. (you can create a new MVC app and just add these quickly and see for yourself)
Controller:
public ActionResult AjaxTest(int? year, int? month)
{
ViewBag.Message = string.Format("Year: {0}, Month: {1}", year.HasValue ? year.ToString() : "no year", month.HasValue ? month.ToString() : "no month");
return PartialView("AjaxTest");
}
AjaxTest View:
#ViewBag.Message
Index View:
<script>
$(function () {
var url="";
$("#noParams").click(function () {
url = "Home/AjaxTest";
$("#ajaxy").load(url)
$("#url").text(url);
});
$("#yearParam").click(function () {
url = "Home/AjaxTest?year=2012";
$("#ajaxy").load(url)
$("#url").text(url);
});
$("#yearAndMonthParam").click(function () {
url = "Home/AjaxTest?year=2012&month=10";
$("#ajaxy").load(url)
$("#url").text(url);
});
$("#generated").click(function () {
url = "#(Url.Action("AjaxTest", new { year=2012, month=10}))";
$("#ajaxy").load(url);
$("#url").text(url);
});
});
</script>
<a id="noParams" href="#">No Params</a> <br />
<a id="yearParam" href="#">Year Param</a> <br />
<a id="yearAndMonthParam" href="#">Year and Month Param</a> <br />
<a id="generated" href="#">Generated</a> <br />
<div id="ajaxy">
</div>
<div>
URL: <span id="url"></span>
</div>
By default every content (which is not IHtmlString) emitted using a # block is automatically HTML encoded by Razor (see this Razor intro article Html Encoding section)
The Url.Action returns just a plain string so thats why the & gets encoded.
Use the Html.Raw if you don't want the encodeing:
url = "#(Html.Raw(Url.Action("AjaxTest", new { year=2012, month=10})))";
You can build the url in this way also.
var url = "#Url.Action("AjaxTest","YourControllerName")?year=2012&month=10";
$("#ajaxy").load(url);
I have used Valums uploader plugins for file uploads in asp.net mvc 3. Following is the views which have form fields and ajax query upload button inside form. I am not sure that I am doing it right or not. What I have to change on view so that When I Choose the file to upload the form field's value is also send.
Views:
<link href="#Url.Content("~/Content/css/fileuploader.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Content/js/fileuploader.js")" type="text/javascript"></script>
#using (Html.BeginForm("Upload","AjaxUpload")) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Upload Image File</legend>
<div class="editor-label">
#Html.Label("Select Language")
</div>
<div>
#Html.DropDownList("Language1", (SelectList) ViewBag.lang)
</div>
<div class="editor-label">
#Html.Label("Select Category")
</div>
<div>
#Html.DropDownList("ParentCategoryID", ViewBag.ParentCategoryID as SelectList)
</div>
<div id="file-uploader">
<noscript>
<p>
Please enable JavaScript to use file uploader.</p>
</noscript>
</div>
</fieldset>
}
**<script type="text/javascript">
var uploader = new qq.FileUploader
({
element: document.getElementById('file-uploader'),
action: '#Url.Action("upload")', // put here a path to your page to handle uploading
allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'], // user this if you want to upload only pictures
sizeLimit: 4000000, // max size, about 4MB
minSizeLimit: 0 // min size
});
</script>**
How Can I passed the value of form to controller of HTTPOST Action So that I can save data to the database. Here, I have Upload action which save the data in database but I don't know to retrieve to those value send by form post.
HttpPost Action
[HttpPost]
public ActionResult Upload(HttpPostedFileBase qqfile)
{
var wav = new PlayWav
{
Name = ***filename***,
CategoryID = ***value from category dropdown select list***,
UserID = repository.GetUserID(HttpContext.User.Identity.Name),
LanguageID = int.Parse(***value from language dropdown select list***),
UploadDateTime = DateTime.Now,
ActiveDateTime = DateTime.Now,
FilePath = "n/a"
};
if (qqfile != null)
{
// this works for IE
var filename = Path.Combine(Server.MapPath("~/App_Data/Uploads"), Path.GetFileName(qqfile.FileName));
qqfile.SaveAs(filename);
return Json(new { success = true }, "text/html");
}
else
{
// this works for Firefox, Chrome
var filename = Request["qqfile"];
if (!string.IsNullOrEmpty(filename))
{
filename = Path.Combine(Server.MapPath("~/App_Data/Uploads"), Path.GetFileName(filename));
using (var output = System.IO.File.Create(filename))
{
Request.InputStream.CopyTo(output);
}
**db.PlayWavs.Attach(wav);
db.SaveChanges();**
return Json(new { success = true });
}
}
return Json(new { success = false });
}
Didn't you read the documentation? There's a whole section entitled Sending additional params. Even an example is given:
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader'),
action: '/server-side.upload',
// additional data to send, name-value pairs
params: {
param1: 'value1',
param2: 'value2'
}
});
I am using Visual Studio 2010 updated to the latest version and the MVC3 framework updated to the latest version. I am also using jquery 1.5.1 but this issue does not appear to be jquery related.
I have the following main page:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<link href="#Url.Content("~/Content/UserMaintainance.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/UserMaintainance.js")" type="text/javascript"></script>
#model TourSystem2.Models.UserMaintainanceViewModel
#{
ViewBag.Title = "UserMaintainance";
}
#Model.Debug
<h2>User Maintainance</h2>
<div id = "EditUser"></div>
<table>
<tr id="1">
<td><button type="button" class = "deleteButton"></button></td>
<td><button type="button" class = "editButton"></button></td>
<td>John </td>
<td>john </td>
<td>A</td>
<td>1234 </td>
<td></td>
//snipped some unrelated form generation of user information showing
<tr id = "0">
<td colspan = "7"><button type = "button" id = "addButton">Add New User</button></td>
</tr>
</table>
In the java script for this form, I do the following for the addButton:
$(function () {
$(':button.editButton, :button#addButton').click(function () {
var myData = $(this).parent().parent().attr("id");
$.post("/Admin/EditUser", { UserID: myData },
function (data) {
$('#EditUser').html(data);
$('#EditUser').dialog({
modal: true,
width: 400,
resizable: false,
buttons: {
"Save": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
}); //end post
});
The partial page /Admin/EditUser looks like this:
#model TourSystem2.Models.UserEditViewModel
<link href="/Content/UserEdit.css" rel="stylesheet" type="text/css" />
#Html.HiddenFor(Model => Model.UserInfo.iUserID)
<table id="useredit">
<tr>
<td>#Html.LabelFor(Model => Model.UserInfo.cLoginName, "Login Name")</td>
<td>#Html.TextBoxFor(Model => Model.UserInfo.cLoginName)</td>
</tr>
//Snip more fields
</table>
My controller code for EditUser looks like:
public ActionResult EditUser(int UserID)
{
UserEditViewModel myUser = new UserEditViewModel();
if (UserID == 0)
{
myUser.UserInfo.iUserID = 0;
return PartialView("UserEdit", myUser);
}
else if (myUser.Load(UserID))
{
return PartialView("UserEdit", myUser);
}
else
{
return Json("Broken: " + myUser.Debug);
}
}
My intention is that upon clicking save, I will do another AJAX post to pass the information back to the server.
So far, everything is working pretty well except the value attribute of the textbox does not change even though the text in the box has changed. If I click on edit, the data files out correctly on the editUser partial page... but any changes are not reflected in the value.
Using firebug, I can visually see that value does not change for any textbox I have on the screen. During the "save user" post, only the original value is returned and not the modified value.
Did I miss something very basic?
*EDIT 1***
I am trying to do the following in my SaveButton event:
"Save": function () {
var myUser =
{
iUserID: ('#UserInfo_iUserID').val,
cLoginName: ('#UserInfo_cLoginName').val,
};
$.ajax({
type: "POST",
url: "/admin/SaveUser",
data: myUser,
success: function (bNum) {
alert("returned" + bNum);
}
});
I am getting old results for the cLoginName: ('#UserInfo_cLoginName').val
This happens before the second POST.
That's a common gotcha when you try to modify values in a POST action that are contained in the ModelState and rendering the same view. You will need to remove the value from model state before changing it or HTML helpers (such as HiddenFor) will use the POSTed value when binding:
ModelState.Remove("UserInfo.iUserID");
myUser.UserInfo.iUserID = 0;
return PartialView("UserEdit", myUser);
Verify by debugging that ModelState contains a value called UserInfo.iUserID.
UPDATE:
It seems that the wrong syntax is used to retrieve the values:
('#UserInfo_iUserID').val
instead of:
$('#UserInfo_iUserID').val()
I had the same issue as Darrin described below
See Updating value provider prior to TryUpdateModel
The helpers exhibit this behavior because they assume if you are redisplaying data after a post there should be a validation failure otherwise you would be redirecting to a get action as part of the MVC PRG (post redirect get)pattern
I believe your issue though is different as was pointed out below.