Transferring a Dictionary Key to a JavaScript function

I need help with sending a Dictionary key (which is a string) to a JavaScript function.

<%
    foreach (var field in Model.Fields)
    { %>
      <tr><td>
      <a href="#" onclick="javascript:EditField(<%= field.Key %>)">
      <%= Html.Encode(field.Value.Name) %></a>
      </td><tr>
<% } %>

However, the JavaScript function receives it as an object that contains the entire 'FIELD' object instead of just a string.

This is how my JS function looks -

function EditField(field) {
// additional code here

}

Are there any potential issues when passing Dictionary keys to a JS function?

Answer №1

When calling a JavaScript function, you can only pass simple types like strings and integers. If you need to pass complex objects, you will have to JSON encode them. In your situation, it's important to note the .NET type of your dictionary key. If it is a string, make sure to enclose it in quotes and remember to HTML encode it:

<a href="#" onclick="javascript:EditField('<%= Html.Encode(field.Key) %>')">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the world of Django static files, along with the magic of CSS and

Currently running on django 1.3 for production and encountering an issue with using static files in my CSS and JavaScript. Strangely, there are no problems in my HTML code! How can I resolve this dilemma? Unfortunately, the Django documentation does not pr ...

The CoffeeScript closure _this reference becomes elusive when trapped within multiple nested loops

Something interesting to note about CoffeeScript. Summary: { In CoffeeScript, the fat arrow (=>) creates a closure that stores the reference to `this`. Every instance of @ is replaced with the original value of `this`. For example, the following code: ...

Tips for showing an alert when incorrect login credentials are entered on a login form

<?php include('includes/config.php'); if(isset($_POST["submit"])){ $empid=$_POST["empid"]; $pass=$_POST["password"]; $query=mysqli_query($conn,"SELECT employee_id, fname,lname,empid,password, status, role FROM employee where empid='$emp ...

Deactivate input areas while choosing an option from a dropdown menu in HTML

I've been working on creating a form and have everything set up so far. However, I'm looking to disable certain fields when selecting an option from a dropdown list. For instance, if the "within company" option is selected for my transaction typ ...

React-native: Issue with this.setState not updating until the second click

I stumbled upon an unusual bug that's been bothering me. When I click on any button for the first time, it shows up as undefined, but every subsequent click works fine. I've tried different approaches to fix this issue while coding, but it always ...

What could be causing the promises in Promise.all to remain in a pending state?

After restructuring my code to correctly utilize promises, I encountered a challenge with ensuring that the lastStep function can access both the HTML and URL of each page. To overcome this issue, I'm attempting to return an object in nextStep(). Alt ...

Control the appearance of your Angular UI-Grid by dynamically adjusting the CSS style as the page size changes

How can I dynamically change the CSS style when the page size is adjusted in Angular UI-Grid? In my use case, I need to display edit/delete options in grey color based on the type of user logged in. The ng-disabled directive is set based on the "row.entit ...

Angular 2 Mouseover Functionality

Can anyone share the correct method for creating a hover-like event in the latest Angular2 framework? In the previous Angular1 version, we used ng-Mouseover for this purpose, but it seems like it is no longer available in Angular2. I have searched throug ...

Recalling the use of jquery toggle throughout the website?

I have successfully implemented a button to hide and unhide a lengthy menu with a click, but I am struggling to make the menu state persistent across multiple pages. I would like the last toggle action by the visitor to be remembered. Any suggestions on ho ...

Retrieve text from a dropdown menu while excluding any numerical values with the help of jQuery

I am currently implementing a Bootstrap dropdown menu along with jQuery to update the default <span class="selected">All</span> with the text of the selected item by the user. However, my objective is to display only the text of the selected it ...

When a Modal Popup Extender is triggered, the rest of the form will be reset if the cancel event is activated

For the main form to display a subform, I am using the ModalPopupExtender. Instead of linking it to a button event, I am using a hidden field as the TargetControlID and PopupControlId. The main form has a submit button, which, when clicked, displays the s ...

The Nuxt auth module fails to update the user's loggedin status within the store state

Currently, I am implementing Authentication functionality using the Nuxt Auth Module. My frontend is built on Nuxt Js, while my backend is running Laravel 5.7 In nuxt.config.js, I have configured the auth settings as follows: auth: { strategies: { ...

Is it possible to establish a standard view for the date/time input field, disregarding the user's

When working with a Django Form, I am incorporating a datepicker. While the solution may involve JS and HTML, my query remains specific. date_field= forms.DateField( input_formats=['%Y-%m-%d'], widget=forms.DateInput( format=& ...

What is the internal mechanism behind the operation of JavaScript function parameters?

As someone who is new to programming, I've been struggling to understand how parameters and arguments work behind the scenes. For example: function changeStuff(a) { return a = a * 10; } var num = 10; console.log(changeStuff(num)); / ...

Is it possible to monitor database modifications in Asp.Net SignalR? Discover the answer with Asp.Net Web Forms

Within my ASP.NET application, I have a List View enclosed in an Update Panel. Update Panel List View Email 1 Email 2 Email 3 ... I am working on creating an inbox functionality similar to GMAIL, where I am facing d ...

Issue: Exceeding rendering limit. React has a restriction on the number of renders to avoid endless loops

I'm in the process of creating a basic to do list using React, and I've encountered an issue with the handleSubmit() function that I can't seem to resolve. import React, { useState } from "react"; function TaskList() { const [ta ...

Click on links within a UIWebView while browsing m.youtube.com on an iOS device

Utilizing uiwebview within my iOS application has been a great experience. I have successfully integrated a textbox above it that allows for seamless navigation of the web content. One particular example involves loading m.youtube.com, conducting a search ...

Customizing the Switch component individually for each item fetched from an API in React Native

I'm struggling with setting the switch button individually for each item in my API. Despite trying multiple solutions, none of them seem to work for me. const results = [ { Id: "IySO9wUrt8", Name: & ...

Issue: Transmission terminated, do not expect a response

Currently, I am attempting to incorporate wascally (npm) into a meteor application. Despite having it properly configured and operational, I am faced with challenges when utilizing the request() function and chaining then() statements to handle responses. ...

Obtaining registration IDs for sending push notifications in curl PHP can be achieved by following these steps

Essentially... the scenario involves two working files: a curlphp script and an angular1 js file. In the js file, when an admin user clicks on 'send notification', it triggers an event to send a message by calling curl through a function. The f ...