Post-back after file download does not work - download

My page has a pop-up. The button on popup generates and downloads Aspose excel file. (The page also has Ajax settings)
Now after file download, my button is disabled and nothing else works on page unless i refresh it manually.
Popup on page
<div class="modal hide" id="AwaitPracSignoffReportModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>
<asp:Label runat="server" ID="lblPopupHeading" Text="Awaiting Practice Sign-off Report" /></h3>
</div>
<!-- Other asp controls in popup-->
<div class="modal-footer" style="margin-bottom: 5px">
<button class="btn" data-dismiss="modal">
Cancel</button>
<asp:Button runat="server" ID="btnGenerateReport" CssClass="btn btn-primary"
Text="Generate Report" ValidationGroup="ReportModal" OnClientClick="javascript:setFormSubmitToFalse();" />
</div>
</div>
Script
function HideGenerateReportPopup() {
$('#AwaitPracSignoffReportModal').modal().hide();
}
function setFormSubmitToFalse() {
setTimeout(function () { _spFormOnSubmitCalled = false; }, 3000);
return true;
}
CodeBehind
btnGenerateReport.Click += (s, ev) =>
{
this.Presenter.ExportToExcel();
ScriptManager.RegisterStartupScript(this, this.GetType(), "Generate Report", "HideGenerateReportPopup();", true);
};
Presenter Code (different project)
Aspose.Cells.Workbook workbook = new Aspose.Cells.Workbook();
int worksheetNo = 0;
foreach (System.Data.DataTable dt in ds.Tables)
{
Aspose.Cells.Worksheet worksheet = workbook.Worksheets[worksheetNo];
worksheet.Cells.ImportDataTable(dt, true, "A1");
worksheet.AutoFitColumns();
worksheetNo++;
}
workbook.Save(HttpContext.Current.Response, filename, ContentDisposition.Attachment, new XlsSaveOptions(SaveFormat.Excel97To2003));
HttpContext.Current.Response.Flush();
HttpContext.Current.Response.End();
I have added setFormSubmitToFalse function as recommended here.
If I try to add AjaxSettings for the btnGenerateReport, it gives script error
Uncaught Error: Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed. Common causes for this error are when the response is modified by calls to Response.Write(), response filters, HttpModules, or server trace is enabled.
When i remove it, the page stays as is and no more contols work.

Found my answer here
the page and the PDF. You can't do that. Typically download pages start a download as a separate request when you've gone to them (via JavaScript, I believe), with a direct link just in case the JavaScript doesn't work.
Now i have added a separte page (ashx) and open it in a separate tab.

Related

CodeEffects RuleEditor not rendering in MVC dialog

Currently we have a full page that renders the RuleEditor without issue in the view. I've ran into an issue in getting this to render properly on a dialog.
I'm using the same exact logic to load the objects between the full view and the dialog view.
Here is what the RuleEditor looks like in the full view with an example rule:
RuleEditor Full view
Here is the RuleEditor display (bad rendering) for the same rule
RuleEditor within dialog
The div content within this dialog is:
<div id="ruleModel" name="ruleModel">
<input type="hidden" id="ruleModelData" name="ruleModel">
.
</div>
There are no html/javascript console errors. Any thoughts on why this is happening?
Thanks!
*******UPDATE*****
Here is the .cshtml content for the dialog:
#model RuleViewModel
<link href="#Url.Content("~/Content/Common.css")" rel="stylesheet"
type="text/css" />
#{
ViewBag.Title = "Edit Rule1";
Layout = null;
Html.CodeEffects().Styles()
.SetTheme(ThemeType.Gray)
.Render();
}
#using (Html.BeginSecureForm("Save", "Rule"))
{
#Html.ValidationSummary(true)
<br />
<b>Rule Name:</b> #Html.TextBoxFor(m => m.RuleName, new { id =
"RuleName", #class = "form-control" })
<fieldset>
<div class="main">
<div class="area">
<div style="margin-top:10px;">
#{
Html.CodeEffects().RuleEditor()
.Id("ruleModel")
.ShowToolBar(false)
.Mode(RuleType.Evaluation)
.Rule(ViewBag.Rule)
.DataSources(Model.DataSources)
.ContextMenuRules(Model.Rules)
.Render();
}
#{
Html.CodeEffects().Scripts().Render();
}
</div>
<div class="modal-footer">
<input class="btn btn-default" submit" type="submit"
value="Save" />
<button type="button" class="btn btn-
default">Cancel</button>
</div>
</div>
</div>
</fieldset>
}
UPDATE #2
I took from the AJAX example and did all the RuleEditor settings via the AJAX post/controller methods. That seems to work better, but now the context menu seems disconnected. (See area in Red Circle)RuleEditor In Dialog, Context Menu behind
Most likely your dialog is "disconnected" from the main editor's script and all json settings it receives from the server on load. Another possibility is that your dialog tries to render the editor before those json setting values gets to the client.

Browser-independent way to save text in a TextAreaFor

Using ASP.NET MVC, I have a View that contains a TextAreaFor, where I want users to be able to type in some notes and save them on-the-fly, see notes that were saved there before (whether by them or some other user), as well as modify existing notes (like to add additional notes). Here's what I have....
The divs in the View:
<div class="form-group">
<label for="InternalNotes" class="control-label">Internal Notes</label>
#Html.TextAreaFor(w => w.InternalNotes, new { #class = "form-control" , #id="notes" }) #*this is editable*#
</div>
<div class="form-group">
<div class="col-xs-6">
<button type="button" id="savenotes" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Save Request Notes</button>
<div style="color:green; display:none" id="notessuccess">Notes successfully saved</div>
<div style="color:red; display:none" id="noteserror">Notes unable to be saved</div>
</div>
<div class="col-xs-6 text-right">
<button type="submit" id="deletereq" class="btn btn-default btn-primary" value="delete" name="submit"><span class="glyphicon glyphicon-remove"></span> Delete Request</button>
</div>
</div>
So the user could type something into the TextAreaFor, then hit the "savenotes" button, which should save them via Ajax. This is the jQuery for that:
$(document).ready(function () {
$("#savenotes").click(function () {
$("#notessuccess").hide();
$("#noteserror").hide();
var id = #Model.AccessRequestId;
var notes = document.getElementById("notes").textContent; //innerText;
$.ajax({
data: { 'id': id, 'notes': notes },
type: 'POST',
//contentType: "application/json; charset=utf-8",
url: '/Administration/SaveRequestNotes',
success: function (data) {
if (data.success == "ok") {
$("#notessuccess").fadeIn();
} else {
$("#noteserror").fadeIn();
}
},
fail: function (data) {
$("#noteserror").fadeIn();
}
});
});
});
The "innerText" is commented out because that's what I was originally using, but it was only working in Internet Explorer - another user is using Chrome, where he could see the other user's notes that were already there, but when he'd try to save notes in addition to theirs, it would blow it all out so the notes would be empty!
So I changed it to "textContent". That still works in Internet Explorer, but now in both Chrome and Firefox while it won't empty out existing notes, it still won't save new notes added. What is a browser-independent way I can make this work so everyone's notes will get properly saved whatever they are using?
Thank you!
You can use the jQuery val() method get the text user entered to the textarea
var notes = $("#notes").val();
alert(notes);
You might also consider using the Url.Action helper method to generate the correct relative path to your action method.
url: '#Url.Action("SaveRequestNotes","Administration")',

Returning data from dynamic (AJAX) loaded Bootstrap Modal

I am using Bootstrap modal's in a Codeigniter application as a popup WYSIWYG text-editor. Everything in regards to loading content, and the modal, works fine. I can even save the content when the modal is open via AJAX.
But what I am trying to accomplish is when I hit the "Save" button in my modal... I want to return the value — $('#wysiwyg').val() — to the page that opened the modal.
Link triggering the modal
Write Text
JavaScript loading modal - Modified source from https://gist.github.com/drewjoh/1688900
$('.ajax-modal').click(function(e) {
e.preventDefault();
var modal = $('#ajax-modal');
var url = $(this).attr('href');
if(url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
modal.html(data);
modal.modal();
}).success(function() {
/* boom. loaded. */
});
}
});
HTML modal wrapper
<div id="ajax-modal" class="modal hide fade" data-backdrop="static" data-keyboard="false" tabindex="-1"></div>
HTML modal body/contents
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Text Editor</h3>
</div>
<div class="modal-body">
<textarea class="input-block-level" id="wysiwyg" rows="9">Write something...</textarea>
</div>
<div class="modal-footer">
<button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button id="submit-modal" class="btn btn-success">Save</button>
</div>
Thanks in advance.
You could try something like this:
var modal = $('#ajax-modal');
// Filter clicks within the modal to those on the save button (#submit-modal)
modal.on('click', '#submit-modal', function(e) {
// Find the wysiwyg within the modal
var wysiwyg = $('#wysiwyg', modal);
// Now do what you want with wysiwyg.val();
if (wysiwyg.length) $('#my_info_div').html(wysiwyg.val());
});
I think I get what you are asking for...There are a few ways you can do this. If you want to create a more separated approach you could use a pub/sub framework like Amplify. The simplest approach would be to create a reference to the element you want to populate prior to creating the click event. Like so:
var controlToPopulate = $("#controlToPopulateId");
$('.ajax-modal').click(function(e) {
e.preventDefault();
var modal = $('#ajax-modal');
var url = $(this).attr('href');
if(url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
modal.html(data);
modal.modal();
}).success(function() {
/* boom. loaded. */
modal.find('#submit-modal').click(function() {
controlToPopulate.val(modal.find('#wysiwyg').val());
});
});
}
});
When you wrote if(url.indexOf('#') == 0), did you mean if(url.indexOf('#') == -1)? indexOf('#') returns -1 if # does not appear in the string.

Keep Bootstrap Modal open when clicking on a link

I have an Ajax Modal and have a number of links within the modal, however when I click on the links it will reload the page not the content within the Modal. How can I keep the Modal open? The code I am using:
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header 2</h3>
</div>
<div class="modal-body">
//content
<div class="modal-footer">
<a class="btn btn-primary" onclick="$('.modal-body > form').submit();">Save Changes</a>
<a class="btn" data-dismiss="modal">Close</a>
</div>
$(document).ready(function() {
// Support for AJAX loaded modal window.
// Focuses on first input textbox after it loads the window.
$('[data-toggle="modal"]').click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
$('<div class="modal hide fade">' + data + '</div>').modal();
}).success(function() { $('input:text:visible:first').focus(); });
}
});
});
Chose to use an iFrame plugin https://github.com/Nikku/jquery-bootstrap-scripting/pull/69

Error on submiting form MVC3 .Net

Hi there I have an error when I submit the following form:
<div id="tabs">
<ul>
<li>Project Details</li>
<li>Project Attachments</li>
<li><a href="#Url.Action("Members", "ProjectNetwork", new { IsTab = true })">Project
Network</a></li>
<li>Bulleting Board</li>
<li>Bids Received</li>
</ul>
</div>
<div id="LowerButton">
#Html.Hidden("MainStatus", #Model.Status)
#using (#Html.BeginForm("Dashboard", "Dashboard"))
{
<button type="button" id="MakeComment">
Make a Comment
</button>
<input type="submit" id="GoDashBoard" value="Return to Project List" />
}
</div>
When I press the button "GoDashBoard", The method "Dashboard" in the controller "Dashboard" is not reached. Instead the following error appears:
It tells me that a model property is beign sent to the server. However, there are no model properties inside the dashboard form.. unless I'm sending many forms at the same time. But I dont think thats possible right? Do you guys have any idea of why is trying to set a model property when I'm not actually sending any?
Update:
this is the input of the dashboard action:
public ActionResult Dashboard(int page = 1)
{
var user = (User)Session["User"];
if (user != null)
{...
}}
the input is a default integer. However, I saw the trace of the calls and its submiting another form which is not related to the one im using:
That form is inside of one of the ajax tabs. I dont understand how one form submits another form and they are not nested. Anyone knows a good workaround? because im thinking of receiving both forms in both actions and make some validations.
I solved it by removing the form "Dashboard" and instead adding an invisible link. The button would reference the invisible link:
#*#using (#Html.BeginForm("Dashboard", "Dashboard"))
{ *#
<button type="button" id="MakeComment">
Make a Comment
</button>
<button name="button" type="button" onclick="document.location.href=$('#GoDashBoard').attr('href')">Return to Project List</button>
<a id="GoDashBoard" href="#Url.Action("Dashboard", "Dashboard")" style="display:none;"></a>
#*<input type="submit" id="GoDashBoard" value="Return to Project List" />*#
#* }*#

Resources