I have an issue where between two pages I am sharing a modal, both pages are using the same angularJs version(v1.2.14), and both pages call the exact same directives (ui.select2). The select box inside of the modal works on one page, whilst on the other it simply stay as the default option.
As an fyi I have tried implementing the select box in different styles e.g. ng-repeat on the options, and not using the track by. This however results in the other pages selecting options to break. I can only ever get one page to work and the other to break.
The strange thing is that in the background the bound value is updating correctly:
<div class="col-md-10">
<select ui-select2="{width: '100%'}" class="form-control"
ng-model="Model.DocumentTypeId"
ng-options="documentType.DocumentTypeId as documentType.DocumentTypeDescription for documentType in Model.DocumentTypes track by documentType.DocumentTypeId">
<option value="">Select Document Type</option>
</select>
</div>
If you have any suggestions of why this is occurring it would be great.
Here is a heavily truncated view of the controller:
module Views.TMDocumentUpload {
export class DocumentUpload implements IDocumentUpload {
public static SetupDocumentUploadDialog = "onSetupDocumentUploadDialog";
public Init(model: DocumentUploadViewModel) {
var self = this;
if (self.$scope.Model.HideDocumentType || self.$scope.Model.DocumentTypeId == null) {
if (self.$scope.Model.DocumentTypes.length == 1) {
self.$scope.Model.DocumentTypeId = self.$scope.Model.DocumentTypes[0].DocumentTypeId;
}
}
}
constructor(public $scope: IDocumentUploadScope, $http: ng.IHttpService, $timeout: ng.ITimeoutService) {
$scope.isAllSelected = true;
$scope.ShareConfig = [];
$scope.Model.DisplayShareOptions = false;
$scope.Init = () => {
var self = this;
$scope.$on(DocumentUpload.SetupDocumentUploadDialog,
(e: ng.IAngularEvent, args?: Views.TMDocumentUpload.DocumentUploadViewModel) => {
self.$scope.Model = new DocumentUploadViewModel();
$http.get("/GetInitialModel")
.success(function (data: DocumentUploadViewModel) {
angular.extend(data, args);
self.Init(data);
});
});
};
}
}
DocumentUpload.$inject = ["$scope", "$http","$timeout"];
}
I have resolved the issue by removing ui-select2, it seems that this was causing some sort of conflict with another directive in my second page.
Related
I would like to setup gridview under MyTickets tab.
How can I set this view to have only tickets from username eg 'testuser' ?
In controller I have below code. Table Zgloszenia is my table where I storing all information about tickets (date,username, id etc)
public ActionResult MyTickets(Zgloszenia model)
{
if (Session["UserID"] != null)
{
test dg = new test();
var item = dg.Zgloszenia.Where(x => x.UsrUsera == model.UsrUsera).SingleOrDefault();
return View(item);
}
else
{
return RedirectToAction("Login");
}
}
In view I have this code:
#model IEnumerable<Webform.Models.Zgloszenia>
#{
ViewBag.Title = "MyTickets";
WebGrid grid = new WebGrid(Model);
}
<h2>MyTickets</h2>
#if (Session["UserID"] != null)
{
<div>
Welcome: #Session["Username"]<br />
</div>
}
#grid.GetHtml(columns: new[] {
grid.Column("Opis"),
grid.Column("Priorytet"),
grid.Column("Srodowisko"),
grid.Column("NumerTaska"),
grid.Column("test"),
grid.Column("Date")
})
When I log in to my app and click Tab "MyTicket" I'm receiving below error:
A data source must be bound before this operation can be performed.
How I can fix this issue and set up view properly ?
In your action you are selecting a single item, not a collection to enumerate. On the contrary, the WebGrid expects a collection as a data source, so the way you declared things on the view is fine.
To check if that is indeed the issue, simply remove SingleOrDefault call in your action. If your Where call returns at least one record, you should be able to see it on the page:
test dg = new test();
var items = dg.Zgloszenia.Where(x => x.UsrUsera == model.UsrUsera).ToList();
return View(items);
Are you working with Visual studio? If yes, you have to make a dataset. (local or online) You do not have a database at the moment so he saves it nowhere.
In my mvc solution I was originally using a viewModel to hold an IEnumerable of SelectListItems. These would be used to populate a dropdownfor element like below
#Html.DropDownListFor(model => model.Type, Model.PrimaryTypeList, new { data_acc_type = "account", data_old = Model.Type, #class = "js-primary-account-type" })
the problem being that whenever I had to return this view, the list would need re-populating with something pretty heavy like the following:
if(!ModelState.IsValid){
using (var typeRepo = new AccountTypeRepository())
{
var primTypes = typeRepo.GetAccountTypes();
var primtype = primTypes.SingleOrDefault(type => type.Text == model.Type);
model.PrimaryTypeList =
primTypes
.Select(type => new SelectListItem()
{
Value = type.Text,
Text = type.Text
}).ToList();
}
return View(model);
}
It seemed silly to me to have to rewrite - or even re-call (if put into a method) the same code every postback. - the same applies for the ViewBag as i have about 6 controllers that call this same view due to inheritance and the layout of my page.
At the moment i'm opting to put the call actually in my razor. but this feels wrong and more like old-school asp. like below
#{
ViewBag.Title = "Edit Account " + Model.Name;
List<SelectListItem> primaryTypes = null;
using (var typeRepo = new AccountTypeRepository())
{
primaryTypes =
typeRepo.GetAccountTypes()
.Select(t => new SelectListItem()
{
Value = t.Text,
Text = t.Text
}).ToList();
}
#Html.DropDownListFor(model => model.Type, primaryTypes, new { data_acc_type = "account", data_old = Model.Type, #class = "js-primary-account-type" })
Without using something completely bizarre. would there be a better way to go about this situation?
UPDATE: While semi-taking onboard the answer from #Dawood Awan below. my code is somewhat better, still in the view though and i'm 100% still open to other peoples ideas or answers.
Current code (Razor and Controller)
public static List<SelectListItem> GetPrimaryListItems(List<AccountType> types)
{
return types.Select(t => new SelectListItem() { Text = t.Text, Value = t.Text }).ToList();
}
public static List<SelectListItem> GetSecondaryListItems(AccountType type)
{
return type == null?new List<SelectListItem>(): type.AccountSubTypes.Select(t => new SelectListItem() { Text = t.Text, Value = t.Text }).ToList();
}
#{
ViewBag.Title = "Add New Account";
List<SelectListItem> secondaryTypes = null;
List<SelectListItem> primaryTypes = null;
using (var typeRepo = new AccountTypeRepository())
{
var primTypes = typeRepo.GetAccountTypes();
primaryTypes = AccountController.GetPrimaryListItems(primTypes);
secondaryTypes = AccountController.GetSecondaryListItems(primTypes.SingleOrDefault(t => t.Text == Model.Type));
}
}
In practice, you need to analyse where you app is running slow and speed up those parts first.
For starters, take any code like that out of the view and put it back in the controller. The overhead of using a ViewModel is negligible (speed-wise). Better to have all decision/data-fetching code in the controller and not pollute the view (Views should only know how to render a particular "shape" of data, not where it comes from).
Your "Something pretty heavy" comment is pretty arbitary. If that query was, for instance, running across the 1Gb connections on an Azure hosted website, you would not notice or care that much. Database caching would kick in too to give it a boost.
Having said that, this really is just a caching issue and deciding where to cache it. If the data is common to all users, a static property (e.g. in the controller, or stored globally) will provide fast in-memory reuse of that static list.
If the data changes frequently, you will need to provide for refreshing that in-memory cache.
If you used IOC/injection you can specific a single static instance shared across all requests.
Don't use per-session data to store static information. That will slow down the system and run you out of memory with loads of users (i.e. it will not scale well).
If the DropDown Values don't change it is better to save in Session[""], then you can access in you View, controller etc.
Create a class in a Helpers Folder:
public class CommonDropDown
{
public string key = "DropDown";
public List<SelectListItem> myDropDownItems
{
get { return HttpContext.Current.Session[key] == null ? GetDropDown() : (List<SelectListItem>)HttpContext.Current.Session[key]; }
set { HttpContext.Current.Session[key] = value; }
}
public List<SelectListItem> GetDropDown()
{
// Implement Dropdown Logic here
// And set like this:
this.myDropDownItems = DropdownValues;
}
}
Create a Partial View in Shared Folder ("_dropDown.cshtml"):
With something like this:
#{
// Add Reference to this Folder
var items = Helpers.CommonDropDown.myDropDownItems;
}
#Html.DropDownList("ITems", items, "Select")
And then at the top of each page:
#Html.Partial("_dropDown.cshtml")
My application must be used in IE. I am automating test in which the script will do the following in listed order
select option 'Accounting' in drop-box "Category" to get Accounting-associated options displayed in drop-box "Category"
select option 'Payment" in drop-box "Name" for page 'Accounting Payment Filter' to display
verify that the 'Employee' text-box in this page is visible
HTML source BEFORE option 'Payment' is selected (the page 'Accounting Payment Filter' has not displayed):
<form id="Main">
<span id="Entity">
<div>
<select id="drop_Category">
<option value =""/>
<option value = "Accounting">
<select id="drop_Name"> <-!
<option value =""/>
<option value ="Payment">
HTML source AFTER option 'Payment' is selected (page 'Accounting Payment Filter' displays and there is an iframe)
<form id="Main">
<span id="Entity">
<div class="ig_Control">
<div class ="ig_content">
<iframe title ="javascript:''">
<html>
<body>
<form id="Form1">
<div id="Panel1">
<table id="table1"
<tr>
<td>
<input id="Employee">
<div>
<select id="drop_Category">
<option value =""/>
<option value = "Accounting">
<select id="drop_Name"> <-!
<option value =""/>
<option value ="Payment">
I have the code up to 'Payment' option is selected. Now I call SwitchIframe function, then find and verify the text-box:
public static bool IsTextboxVisible (IWebDriver driver, Dictionary of all needed data )
{
//....
//Call to switch into iframe
SwitchIFrame(driver,stringXPath);
//Verify text-box is visible
var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(1));
//Script crashes here- can't find element
var Textbox = wait.Until(d => d.FindElement(By.Id(TexboxID)));
return Textbox.Displayed;
}
public static void SwitchIFrame (IWebDriver driver,string strXPath)
{
var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
var iFrame = wait.Until(d => d.FindElement(By.XPath(strXPath)));
driver.SwitchTo().Frame(iFrame);
}
Script can't find the text-box even when I increase the waiting time. Then I tried finding the ID "drop_Name" instead, and the script can find that drop-box. That means it did not switch into the iframe. So I switch that SAME iframe one more time:
public static bool IsTextboxVisible (IWebDriver driver, Dictionary of all needed data )
{
//....
//Call to switch into iframe
SwitchIFrame(driver,stringXPath);
//Call again to switch into the same iframe
SwitchIFrame(driver,stringXPath);
//Verify text-box is visible
var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(1));
//Script crashes here- can't find element
var Textbox = wait.Until(d => d.FindElement(By.Id(TexboxID)));
return Textbox.Displayed;
}
Now script can find the text-box though sometimes is still given the exception that the XPath cannot be evaluated or not results in a web element. I update function SwitchIFrame:
public static void SwitchIFrame (IWebDriver driver,string strXPath)
{
var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
try
{
var iFrame = wait.Until(d => d.FindElement(By.XPath(strXPath)));
driver.SwitchTo().Frame(iFrame);
}
catch (NoSuchFrameException)
{
var iFrame = wait.Until(d => d.FindElement(By.XPath(strXPath)));
driver.SwitchTo().Frame(iFrame);
}
}
But the same exception still happens sometimes in the 'try...' block. My questions:
Why do I have to switch the same iframe twice to get inside one iframe?
Why didn't 'try...catch...' in SwitchIframe function catch the
exception?
Any help is highly appreciated.
You may need to switch around the order of events a little bit. Based on the code you have I would actually wait on those additional divs that are loaded after the selection to become visible.
public static bool IsTextboxVisible (IWebDriver driver, Dictionary of all needed data )
{
//Verify text-box is visible
var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
var Textbox = wait.Until(d => d.FindElement(By.ClassName("ig_content")));
SwitchIFrame(driver,stringXPath);
return Textbox.Displayed;
}
public static void SwitchIFrame (IWebDriver driver,string strXPath)
{
//var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
var iFrame = driver.FindElement(By.XPath(strXPath));
driver.SwitchTo().Frame(iFrame);
}
The reason for the change of order is that those divs are connected to the original html document. Assuming those divs appear when the iFrame is loaded you should be the able to switch to the new iFrame document. If your xPath does not work (IE may or may not play well with it) I would try using the index position of the frame in the switch to. This might be more reliable since the frame does not have an id to find.
driver.SwitchTo().Frame(1);
I removed the wait from the switch statement because in this case if the iFrame is dependent on the divs loading all you should need to do is have the divs there and the frame is loaded a long with it.
In my ASP.NET MVC 4 Web application I have two Models:
Block that has a property Block LinkedBlock.
BlockCollection which contains multiple Block. Every Block instance in Block.LinkedBlock is guaranteed to be also in the BlockCollection.
Now, what I want to do is the following:
If a Block has a linked block it should get a onchange handler that sets the text of the linked block to the text of this block.
Now, in principle, this is pretty simple:
if (Model.LinkedBlock != null)
{
var onChange = string.Format("setText({0}, this.text);", linkedBlockId);
#Html.TextBoxFor(m => m.Text, new { onchange = onChange });
}
<script type="text/javascript" language="javascript">
function setText(id, text) {
$("#" + id).val(text);
}
But the problem is, that I have no idea how to get the correct HTML ID of the linked block.
How do I get it?
Just add any ID you want to your HTML helper when you're rendering linked blocks, like:
#Html.TextBoxFor(m => m.Text, new { id = blockId });
Where blockId is your unique ID, say the ID record has in the database. Later, you can reference this ID when you're constructing onChange handler call. something like:
var onChange = string.Format("setText({0}, this.text);", Model.LinkedBlock.ID);
If you provide more context I'd be able to give you more sample code.
In the Block Model you should have an Id property. Then on your view you can reference that Id.
For example:
class Block
{
public Block LinkedBlock { get; set; }
public int Id { get; set; }
}
Your view has to be strongly typed:
#model Models.Block
or the following depending on what your are doing:
#model Models.BlockCollection
Then change your code to (just add the reference to the linked block):
if (Model.LinkedBlock != null)
{
var onChange = string.Format("setText({0}, this.text);", Model.LinkedBlock.Id);
#Html.TextBoxFor(m => m.Text, new { onchange = onChange });
}
You obviously have to make sure all the linkedBlocks are on the page with their respective ids.
Does that help?
I am currently working on a C# project using ASP.NET. And I'd like to implement a list of dropboxes. So a User starts with a dropbox and can select a method and next to the dropbox is a + and - button, which enables a user to add more dropboxes. So I am wondering how can I implement that is it possible to build a List of dropboxes in ASP.NET?
You don't need any server side code for this, client side scripting is ideal solution for your needs.
Having such HTML:
<div id="MainPlaceholder">
<div id="DropDownPlaceholder">
<select name="myDropDown">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<button type="button" onclick="AddDropDown(this);">+</button>
<button type="button" onclick="RemoveDropDown(this);">-</button>
</div>
</div>
You need the following pure JavaScript to make it work:
<script type="text/javascript">
var added_counter = 0;
function AddDropDown(sender) {
var parent = sender.parentNode;
//make fresh clone:
var oClone = parent.cloneNode(true);
//append to main placeholder:
parent.parentNode.appendChild(oClone);
//store change in global variable:
added_counter++;
}
function RemoveDropDown(sender) {
//don't allow to remove when there is only one left
if (added_counter <= 0) {
alert("One drop down must exist");
return;
}
var parent = sender.parentNode;
//disable so value won't be passed when form submitted:
parent.getElementsByTagName("select")[0].disabled = true;
//hide:
parent.style.display = "none";
//store change in global variable:
added_counter--;
}
</script>
The code has comments, but if you need any further explanation please feel free to ask.
Live test case.
Edit: As you need to read the selected values on the server side code, better approach would be to change the name of each cloned drop down:
var totalAddedCounter = 0;
function AddDropDown(sender) {
var parent = sender.parentNode;
//make fresh clone:
var oClone = parent.cloneNode(true);
//assign unique name:
oClone.getElementsByTagName("select")[0].name += "_" + totalAddedCounter;
//append to main placeholder:
parent.parentNode.appendChild(oClone);
//store change in global variable:
added_counter++;
totalAddedCounter++;
}
Now the tricky part is reading those values. Instead of plain dropboxlistID.Text you will have to iterate over all posted values looking for what you need:
foreach (string key in Request.Form.Keys)
{
if (key.StartsWith("dropboxlistID"))
{
string text = Request.Form[key];
//.....
}