We Keep Coding

ASP.Net MVC 5: Html.RenderAction("...") at runtime

I want to add a PartialView multiple times by pressing a button.
<div id="FilterRows">
#{Html.RenderAction("_FilterRow");}
</div>
<button id="newRow" type="button"
class="btn btn-sm btn-default"
style="width: 50px">+</button>
This piece of code works properly. But now i want to append the div FilterRows with another PartialView of _FilterRow at clicking on the button.
This is how it looks today:
Something like:
$(document).ready(function() {
$("#newRow").click(function() {
$("#Exec").append("<br>", #{Html.RenderAction("_FilterRow");} {
});
});
});
Is unfortunately not working. Any Ideas?

If you add an action which returns the partial rendered as a partial (ie. return PartialView("myView", model); then you can load using jQuery:
# Create a new element to contain...
var el = $('<div></div>');
$('#parent').append(el);
# ...the new content
el.load('#Url.Action("action", "controller"');
(This means running the JS in the razor view to get the correct URL generation. If most of the JS is in its own file, pass the URL from a little JS in the Razor file just for things like URLs.)

As long as your script is in the page (and not in an external .js file) you can use Razor inside js (although feedback directly from MicroSoft indicates that this is "unexpected", it works fine).
Have a look at the rendered html to see what's wrong.
In this case you need quotes (") around the render action:
$("#FilterRows").append("#{Html.RenderAction("_FilterRow");}");
This assumes a number of potential issues:
the 'RenderAction' can't have any newlines in the output
the 'RenderAction' can't have any quotes in the output (either use ' on the append and " inside the render or the other-way-around)
the action to be rendered cannot have any row-specific parameters (which appears to be ok in this case to add a new blank row)
the script must be in a .cshtml file (though you can get around this by setting a global/namespace'd variable in the .cshtml and have the actual code in a .js file)
you need to use the correct combination of #{}/#() and render/tostring
You might be better off with #Html.RenderPartial if you just want to render some html and don't need an action.
An alternative, perhaps more friendly, mechanism would be to have the blank-row already on the page (perhaps hidden) and use .clone().

JQuery doesn't work in partial view i can't fix

When i click button jquery doesn't work in partial view
here is code
Controller
public PartialViewResult Chat()
return PartialView();
}
Button
<input id="button" type="submit">
Render In HTML
<div id="test">
#{Html.RenderPartial("Chat");}
</div>
Javascript
$('#button').live('click', function () {
$('#test').load('#Url.Action("Chat")');
});

Several possible reasons most likely including:
you didn't include jQuery library at all
you didn't call $('#button').live() in a $(document).ready() statement

jQuery initialisation is done to all matching elements in the document at the time of running. If you are dynamically loading your partial view after the initialisation, new elements matching the filter will not be automatically initialised. You will need to run the jQuery initialisers again after the .load is complete.
This will also double up existing matching elements' events so you need to run them using the container div to restrict the elements that will be affected.
$('#test').find('xxxxx').click(function.....

Unable to locate dropdown created by jQuery plugin

I am writing an automation test script in C# using Selenuim Webdriver where I need to click on two dropdowns one by one. Here is the HTML source code of the two dropdown elements:
<select id="ServiceTypeId" class="chosen chzn-done" tabindex="-1" name="ServiceTypeId" style="display: none;"></select>
<div id="ServiceTypeId_chzn" class="chzn-container chzn-container-single">
<a class="chzn-single" tabindex="-1" href="javascript:void(0)"><span>Choose an Option</span></a>
<div class="chzn-drop"></div>
</div>
</div>
<select id="PropertyTypeId" class="chosen chzn-done" tabindex="-1" name="PropertyTypeId" style="display: none;"></select>
<div id="PropertyTypeId_chzn" class="chzn-container chzn-container-single">
<a class="chzn-single" tabindex="-1" href="javascript:void(0)"></a>
<div class="chzn-drop"></div>
</div>
I am able to successfully locate an element in the first dropdown (ServiceTypeId) by CssSelector like this:
driver.FindElement(By.CssSelector("div.chzn-container a.chzn-single")).Click();
Thread.Sleep(1000);
driver.FindElements(By.CssSelector("div.chzn-drop li.active-result"))[5].Click();
Thread.Sleep(500);
But I am unable to locate the second dropdown(PropertyTypeId) as they both have the same classes applied to them.
I tried using to locate them using their ID but its not working:
driver.FindElement(By.Id("PropertyTypeId_chzn")).Click();
I think this plugin has been used to create the dowpdowns: jQuery plugin
Can someone please help me find a way to do this?
EDIT:
The two elements are set to display:none and hence when I am trying to click them using driver.FindElement(By.Id("ServiceTypeId")).Click(); I am getting the error:
Element is not currently visible and so may not be interacted with

Try css3 pseudoselector
driver.FindElement(By.CssSelector("select:nth-of-type(1)")).Click();

It doesn't matter how these dropdowns were created, problem with selector i think. BTW, if in future you want to select value from dropDowns don't forget to click on dropDown first, then select value from it. Anyway, next code should work:
driver.FindElement(By.CssSelector("#ServiceTypeId"));
driver.FindElement(By.CssSelector("#PropertyTypeId"));
UPDATE
//Click on first a link then li will appear in div. Click on 6th elem
driver.findElement(By.CssSelector("#ServiceTypeId_chzn > a")).click();
driver.findElements(By.CssSelector("#ServiceTypeId_chzn .chzn-drop > li"))[5].click();
//Same for second
driver.findElement(By.CssSelector("#PropertyTypeId_chzn > a")).click();
driver.findElements(By.CssSelector("#PropertyTypeId_chzn .chzn-drop > li"))[5].click();

I found out the solution to this and would like to share it as it may help someone else facing similar issue.
The main problem was that the elements were set to display:none and so before clicking them they should be made visible. I can be done using JavaScript like this:
IJavaScriptExecutor js = driver as IJavaScriptExecutor;
js.ExecuteScript("document.getElementById('ServiceTypeId').style.display = '';");
Thread.Sleep(500);
driver.FindElement(By.Id("ServiceTypeId")).Click();
Thread.Sleep(300);
js.ExecuteScript("document.getElementById('PropertyTypeId').style.display = '';");
Thread.Sleep(2000);
driver.FindElement(By.Id("PropertyTypeId")).Click();
Thread.Sleep(500);
Thanks.

Moving text in .Net without refreshing page

I am still new to the coding field and am having a bit of trouble with a part, hoping someone can help me. I am working on a MVC page where i am trying to move text, the user inputs, around the page to a few pre-set spots and without having to refresh the page. Do i need a type of script for this? And if i do what would be best? Thanks for the help.

You can do it this way.
Enter Text here... <input id="testText" type="text" onKeyUp="javascript:showText($(this), event);"/>
<br/>
<br/>
<br/>
See it here... <span id="testTextSpan"></span>
Then, add this script...
<script type="text/javascript">
var showText = function (el, e) {
$('#testTextSpan').html(el.val());
};
<script>
See it here in this JSFiddle...
http://jsfiddle.net/ZEcNp/
Be sure to include JQuery libraries in your project, or reference the CDN.
If you'd like me to include an example with raw javascript, with no JQuery, I can also provide that for you.

I would recommend jQuery to do all that client-side.
You would just need an ID for each element you would use as the predefined spots, using either .appendTo, .insertAfter, .html, or something else depending on your exact needs.

DNN 6 jQuery Tabs

I've tried with several half fails to get the DNN 6 version of jQuery tabs (called DNNTabs) to work inside a custom modules "Edit" page (which opens in a modal, similar to module "Settings"). I want the same default theme/css applied to the tabs and buttons (it should behave almost exactly like Settings).
Here is what appears to be the start of some documentation, but its not very complete.
http://www.dotnetnuke.com/Resources/Wiki/Page/dnnTabs-jQuery-Plugin.aspx
I've scoured the interwebs for an example to follow, but most all examples utilize the original jQuery Tabs and/or a modification of it to "work" with DNN.
http://jqueryui.com/demos/tabs/
The start of my code which does not work.
<script type="text/javascript">
$('#tabs').dnnTabs();
</script>
<div id="tabs" class="dnnForm dnnModuleSettings dnnClear">
<ul class="dnnAdminTabNav dnnClear">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tab1">
Some content...
</div>
<div id="tab2">
Some content...
</div>
</div>
Somewhere else I read I have to request the DNN plugins registration in my OnInit like so:
protected void OnInit(object sender, System.EventArgs e)
{
DotNetNuke.Framework.jQuery.RequestDnnPluginsRegistration();
}
Am I missing another reference, line of code, something? 1) all the tabs display on load and 2) clicking a tab just scrolls to id location in modal (which cannot scroll back to the top after)

I think that looks complete; the only issue that I see is that you're initializing the plugin before you've defined the tabs. That is, the first thing you do is retrieve the element with ID tabs and setup the plugin for it, but that element doesn't exist yet. Move your script to the bottom of your control and I think it'll start working.
One other thing that you might need to adjust is your OnInit handler. Typically, OnInit is an override of Control.OnInit, so it'll end up looking like this:
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
jQuery.RequestDnnPluginsRegistration();
}
You may also want to look at my example of this (and other) plugins at https://github.com/bdukes/DNN-World-Demos. These examples are pretty stripped down, so you'll see that there are a few CSS styles that you don't really need in there, if you aren't using them.