Fancy box with mvc partial view issue - javascript

This is the message I get everytime I click the edit button:
The requested content cannot be loaded.
Please try again later.
Anyone have any ideas? If you need to see the partial view I can post it.
My Conbtroller:
[HttpPost]
public ActionResult SearchEdit(int modelcount)
{
using (Offers.OffersClient o = new Offers.OffersClient())
{
var offers = (List<Offers.Offer>)Session["offer"];
var offer = offers[modelcount];
return PartialView("Search_Edit", offer);
}
}
My View:
<div class="offer_edit">
<a href="#Url.Action("SearchEdit","Home",null,"http")?modelcount=#(i)" class="fancybox">
<img title="Edit" src="../images/edit_button.png" />
</a>
</div>

Your action is decorated with the [HttpPost] attribute. This means that this controller action can only be invoked using the POST verb. But in your view you are using a link (<a>) which when clicked sends a GET request unless you have configured the fancybox to use POST. To further investigate the issue you could use a javascript debugging tool such as FireBug to inspect the AJAX request being sent to the server as well as the response.

Related

How to add a new webpage to ASP.NET MVC

Right now I am making a MVC that has a default page that loads up. From this page, the user can press a button to go to the next page. So far, I have made the first page work and a button that goes to a specified URL for the second page. The only issue I am having is making the view that I want to correspond to the second page have the correct URL.
Here is the code for my button link to the next URL
<input type="button" value="Create" onclick="location.href='#Url.Action("IndexA", "HomeController")'" />
I guess my question is how do I make my view have the specified URL that I want so it can be accessed?
I used something like this in my own project.
#if (Request.UrlReferrer != null && Request.UrlReferrer.Host == Request.Url.Host)
{
<a href="#Request.UrlReferrer" class="dbtn btn-11">
<i class="fa fa-undo"></i>
#Resources._Action_Back
</a>
}
only came from within the domain that was published I said let the button appear.
there is something like add controller in default settings controller name + controller. So just write the name there.
I had to put "home" in the URL.Action instead of "HomeController"
Please see this photo.
https://ibb.co/4SS5nYh
You add a new controller and a new view for that new page (also a model). I have called mine Test.
Then in the button. you call them with url action.
<input type="button" value="Create" onclick="location.href='#Url.Action("Index", "Test")'" />

Is there a way to use a .cshtml file as the popup in a chrome extension?

I want to be able to use the view functionality that a .cshtml would provide me. Is there anyway to make this happen? I already have one loaded but it outputs as plain text.
Is there some service or project that will render a .cshtml file?
No.
cshtml requires a specific server to render it properly, and that is not part of Chrome.
I mean, technically you can host a page somewhere and embed it in the popup as an <iframe>, but I doubt that's an acceptable solution.
You can achieve this by using Partial View. Here below sample code for this.
<div class="row">
<label>Id : </label>
#Html.DisplayFor(model => model.Id)
<label>Name: </label>
#Html.DisplayFor(model => model.Name)
</div>
then create one action in your controller like
public PartialViewResult GetProfilePartial()
{
var model = new ProfileViewModel()
{
Id = 1,
Name = "Sample User";
};
return PartialView("PartialViewName", model);
}
You can import rendered html of this view by calling GetProfilePartial action by ajax call. Hope this will help you.

Liferay portlet: redirect to a new jsp with a js parameter

I'm working on a liferay portlet.
What I want to do is opening a new jsp with sending to it a URL parameter coming from javascript variable. I thought about it and I found two ideas:
1)Send the js variable to the jsp using ajax and then create a render url in jsp with a parameter the value received from js. But how I send js variable to jsp I don't find a good example in the internet.
2)Build the render url in javascript using the received parameter and then redirect from the script itself to the new jsp file using the render url that I found. For this idea I posted this question Liferay portlet: redirect to an other jsp page from javascript but I didn't get solution for it yet.
Has someone a suggestion how I can achieve what I want using one of my ideas or may be an other idea?
I found finally a solution for this problem.
I added in the jsp page a hidden post form that contains just one input and posts to an action method like that:
<portlet:actionURL var="jsVarActionURL" name="jsVarAction"/>
<form:form name="JsVarModel" method="post" modelAttribute="JsVarModel" action="<%=jsVarActionURL.toString() %>">
<form:input id="jsVar" type="text" path="receivedMessage" style="display:none;"/>
<input id="submit" type="submit" value="Add" style="display:none;"></input>
</form:form>
So my want was to for certain condition in javascript I have to send a js variable to new jsp page and open it. So in the script when the condition is valid I set to the input #jsVar the javascript value and I make a virtual click button in the submit button with trigger function of jquery like that:
var jsToJsp="Hello jsp I'm a js variable"
if(/*condition*/)
{
$("#jsVar").val(jsToJsp);
$("#submit").trigger("click");
}
In the controller the action method will receive the value coming from the form input field then it will redirect it to a render method:
#RenderMapping(params={"action=displayPageRender"})
public ModelAndView openUserProfilPage(RenderRequest request,RenderResponse response,Model model)
{
ModelAndView modelAndView= new ModelAndView("display");
modelAndView.addObject("jsVar", request.getParameter("jsVar"));
return modelAndView;
}
#ActionMapping(value = "jsVarAction")
public void sessionKeyActionMethod(#ModelAttribute("JsVarModel")ActionReceiveModel jsVar,ActionRequest actionRequest, ActionResponse actionResponse,Model model)
{
actionResponse.setRenderParameter("jsVar", jsVar.getMessage());
actionResponse.setRenderParameter("action", "displayPageRender");
}
Then I can receive it in display.jsp with ${jsVar} and everything works fine.

Create a secure POST link in express.js

I'm wondering if there's any simple way to create a link to submit a POST request to the server by using some Express.js technique or plugin.
It is also a way to secure more critical actions such as deletion of users. Adding also CSRF protection.
This is quite simple to do in some PHP frameworks such as CakePHP (with its postLink helper).
The way I'm doing it right now is by creating a hidden form by myself and adding in the html link an event to submit the form:
<form action="/users/delete/{{user.id}}" method="post" name="deleteUser{{ user.id }}" style="display:none;">
<input type="hidden" name="_csrf" value="{{ csrfToken }}" />
</form>
<a href="#" onclick="if (confirm('Are you sure you want to delete this user?')) { document.deleteUser{{ user.id }}.submit(); } event.returnValue = false; return false;">
Delete
</a>
This is exactly the way it works in CakePHP framework as well.
Inorder to create link to a POST request you can make use of client side techniques like capturing the click using javascript and generate a ajax post request to the server, Inoder to avoid CSRF attacks express middlewares are available(https://github.com/expressjs/csurf)
I ended up creating my own way to deal with them by using jQuery (but could also be done with javascript as well).
In my case, any link I want to send by POST will have to:
Contain the class postLink.
Contain the destination URL in the href attribute.
Contain the CSRF token in the data-csrf attribute.
Optionally contain the data-confirm attribute to specify a message to show as a confirmation before sending the POST request.
A link in the view would look like so:
<a href="/reject/23" class="postLink" data-confirm="Are you sure you want to reject this item?" data-csrf="NdiuZynW-thVmMqYPZqFFGxGcInQZn35mDf8">
Reject
</a>
Or without the confirm attribute:
<a href="/reject/23" class="postLink" data-csrf="NdiuZynW-thVmMqYPZqFFGxGcInQZn35mDf8">
Reject
</a>
The needed jQuery code is the following:
$(document).on('click', '.postLink', function(e){
e.preventDefault();
var url = $(this).attr('href');
var csrf = $(this).data('csrf');
var confirmed = false;
if(typeof $(this).data('confirm') !== 'undefined'){
if(confirm($(this).data('confirm'))){
confirmed = true;
};
}else{
confirmed = true;
}
if(confirmed){
$('body').append('\
<form action="'+ url +'" method="post" name="postLink" style="display:none;">\
<input type="hidden" name="_csrf" value="'+ csrf +'" />\
</form>\
');
$('form[name="postLink"').submit();
}
});
Basically what it does is applying the same technique of creating a form for each POST link that I mentioned in my question. The only difference is that I don't have to be bothered to create a form every time I want to create POST link.
This way the form will be created dynamically and appended to the body. Then submitted.
To make it secure I made use of the CSRF module for express.js.
If you don't need a secure POST link, then you probably could use the postLink plugin for jQuery.

ASP.NET MVC 2.0 Ajax call - LoadingElementId not re-hidden when OnSuccess script specified

I'm writing a very simple web application in ASP.NET MVC 2.0 which is used as a test interface for a web service. The various pages present a user interface to input the parameters for the request messages. The parameters are submitted back to the controller via Ajax, which returns a partial view containing the response SOAP message (HTML encoded XML) in a <pre> tag...
// In controller...
ActionResult WebMethodTest()
{
return View(new WebMethodModel());
}
[HttpPost]
ActionResult WebMethodTest(WebMethodModel model)
{
model.Response = MyServiceProxy.WebMethod(model.Request);
return PartialView("SoapResponse", model.Response);
}
// In view
<% using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId="Response", LoadingElementId="Loading", HttpMethod="POST", OnSuccess="prettyPrint"}))
{ %>
<!-- various model bound controls... -->
<% { %>
<div id="Loading" style="text-align:center; display:none">
<img src="../../Content/ajax-loader.gif" alt="loading..." /><br />
working...
</div>
Unfortunately the Loading div element is not being hidden again when the data is returned after the Ajax call, it stays visible. Interestingly, it does get hidden correctly if I remove OnSuccess="prettyPrint". I get the impression that my OnSuccess script is overriding the default behaviour, rather than executing in addition. I don't want to lose prettyPrint though as it's colourizing the XML which is being displayed... how can I keep the default loading element behaviour as well as my own OnSuccess hook?
Cheers!
I resolved this issue by amending the OnSuccess script to this:
OnSuccess = "function() { prettyPrint(); return true; }"
So it seems that, like OnBegin, returning false (or anything other than true) cancels the operation, although by this stage the DOM has already been updated, so the only thing you can canel is hiding the Loading element... which doesn't seem terribly useful!

Categories