The process of transferring ViewBag value as a parameter in an AngularJS function

I'm facing an issue where the viewbag value is not being passed as a parameter in ng-init. Can someone guide me on how I can successfully pass the viewbag value as a parameter?

angular.js

    {   $scope.detail = function (Id)

     {

               debugger
               $http.post('/Employees/GetDetail', JSON.stringify({ id: Id }))
               .success(function (result) {
                   debugger
                   $scope.ampdetail = result;
                   $window.location.href = 'Detail/' + Id;
               })
               .error(function (result) {
                   console.log(result);
               });
           }

This is my Controller:

My Controller

       public ActionResult Detail(int empid)
    {
        ViewBag.empid = empid;

        return View();
    }

         [HttpPost]
            public JsonResult GetDetail(int id)
            {
                var employee = (from x in db.employees where x.Id==id
                                     select new {
                                             Id = x.Id,
                                             DeptName = x.TblDepartment.Name,
                                             Name = x.Name,
                                             Salary = x.Salary,
                                             Gender = x.Gender,
                                             City = x.City,
                                             Age = x.Age,
                                             image = x.image
                                     }
                                     );

                return Json(employee, JsonRequestBehavior.AllowGet);
            }


    ----------
    view 
    --------
  <!DOCTYPE html >
<html>
<head>
    <title>Edit Employee</title>
</head>
<body ng-app="app" ng-controller="myController" data-ng-init="detail(@ViewBag.empid)"> // Encountering issues with passing id here??
    <h2>Details</h2>
<div>
    <h4>Employee</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            <label style="display:none">Id</label>
        </dt>
        <dd style="display:none">
            {{ampdetail[0].Id}}
        </dd>
    <dt>
        <label class="control-label col-md-2">DeptName</label>
    </dt>    
        <dd>
            {{ampdetail[0].DeptName}}
        </dd>
        <dt>
            <label class="control-label col-md-2">Name</label>
        </dt>
        <dd>
            {{ampdetail[0].Name}}
        </dd>
        <dt>
            <label class="control-label col-md-2">Gender</label>
        </dt>
        <dd>
            {{ampdetail[0].Gender}}
        </dd>
        <dt>
            <label class="control-label col-md-2">Age</label>
        </dt>
        <dd>
            {{ampdetail[0].Age}}
        </dd>
        <dt>
            <label class="control-label col-md-2">Salary</label>
        </dt>
        <dd>
            {{ampdetail[0].Salary}}
        </dd>
        <dt>
            <label class="control-label col-md-2">City</label>
        </dt>
        <dd>
            {{ampdetail[0].City}}
        </dd>
        <dt>
            <label class="control-label col-md-2">Image</label>
        </dt>
        <dd>
            {{ampdetail[0].image}}
        </dd>
    </dl>
</div>
    @*<script src="~/Scripts/jquery-1.10.2.js"></script>
    <script>
    document.ready(function () {
        alert('@ViewBag.empid')
    });
    </script>*@
</body>

</html>

    }

Answer №1

From my understanding, it seems impossible to achieve because the view is not a razor view.

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

AngularJS - A pagination demonstration incorporating intelligent logic inspired by Google's approach

I struggled to implement a paging solution that I came across online. The issue seems to be related to the timing of function calls, specifically how the setPage function is triggered before all data is retrieved, causing it to not properly determine the t ...

Avoid page refreshing when modifying app.js in React

Today is only my second day using React and I started by creating a React app with "npx create-react-app." However, when I tried to make changes to the app.js file, they didn't appear on the page even after refreshing the browser multiple times. (My n ...

Issue with SideNav function in MaterializeCss following recent update

After updating the css/js files of the Materializecss design in my project from v0.97.5 to v0.97.8, I noticed that my SideNav isn't functioning correctly anymore. When I try to click on the menu, it slides out but the dark overlay covers the entire sc ...

Managing "post" requests in a one-page web application using node.js

Although there may be similar answers to this question, I am in search of something different. On the client side, I have a signUp form that will make a post request to the server with the username and password. On the server side, I authenticate the req ...

Easy steps to automatically disable a checkbox once the expiration date has been reached

I have this PHP code that retrieves values from my database. I want to prevent users from selecting or modifying items with expired dates. Could you assist me with this? The code below currently displays 'Expired' and 'Not Expired' on ...

Determining the moment a user exits a page on Next JS

Is there a way to track when the user exits a Next JS page? I have identified 3 possible ways in which a user might leave a page: Clicking on a link Performing an action that triggers router.back, router.push, etc... Closing the tab (i.e. when beforeunloa ...

Display a clean and simple toastr notification

Is there a way to specifically clear or hide just one toastr message when multiple messages are displayed, without clearing all of them at once? I've attempted the code below, but it didn't work for me. toastr.clear([toast]); For more informati ...

Stop aspx button postback on click using cSharp

The following HTML code snippet includes an <asp:Button> element. <asp:Button ID="CalculateG481" runat="server" Text="Calculate" OnClick="CalculateG481_Click" /> When clicked, the button calls the function CalculateG481_Click but then initia ...

Implement Material UI Card Component in your React Project

I'm currently working on a project that includes a page with expandable cards arranged in a list format. The code I have right now is not very scalable, as I keep adding individual card tags for each item. What I would like to achieve is to load data ...

Unable to use the same hexadecimal HTML entity in the value props of a React JSX component

Can someone explain why this code snippet displays dots as password and the other displays plain hexadecimal codes? <Field label="Password" value="&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;" type="password" /> While this one disp ...

The AudioPlayer refuses to play following a track change

I am looking to implement an audio player in React Nextjs that features interactive dots, each representing an audio track. The functionality I want is such that clicking on a dot will pause the currently playing track (if any) and start playing the select ...

JavaScript data structure similar to ListOrderedMap/ArrayMap

Does anyone know of a JavaScript data structure that functions similarly to ListOrderedMap? I need it to have the capability to add an object at a specific index, retrieve the index for a given object, and lookup an object by its id. Unfortunately, all t ...

Step-by-step guide on uploading a multipart file with AngularJS and Spring MVC

Currently, I am attempting to utilize AngularJS and Spring MVC for file uploading. In my application-context.xml file, I have configured a multipartResolver bean as follows: <mvc:annotation-driven /> <bean id="multipartResolver" ...

In JavaScript, I'm facing an issue where I can't seem to use ' ' for line breaks for some reason. It's not functioning as expected, and I'm

It seems that I have been struggling with writing a new line in my code using "\n". Despite multiple attempts, the desired outcome has not been achieved. Below is my source code along with a screenshot of the result: var ary3 = new Array('seve ...

In what scenario should I respond with true or false to AJAX, and when is it more appropriate to use the echo function to output "true" or "false

It seems I have managed to confuse myself. I mistakenly believed that when using AJAX to communicate with PHP (like $.post), one had to echo back a "true" or "false" instead of simply returning true or false. I now realize this is not the case, but could ...

Viewing HTML web pages using Mozilla Firebox

Printing an HTML table with lots of content has been a challenge for me. Google Chrome didn't work, so I switched to Mozilla Firefox. However, now Firefox is breaking the page inside the table. My question is how can I trigger print preview in Firefox ...

Angular 6 and the intricacies of nested ternary conditions

I need help with a ternary condition in an HTML template file: <div *ngFor="let $m of $layer.child; let $childIndex=index" [Latitude]="$m.latitude" [Longitude]="$m.longitude" [IconInfo]="$childIndex== 0 ? _iconInfo1:$c ...

VueJS together with Firebase: The guide to password validation

I am currently working on a web form developed using VueJS that enables authenticated users to modify their passwords. The backend system relies on Firebase, and I am facing a challenge in validating the user's current password before initiating the p ...

Building an expansive navigation menu with react-bootstrap

My current project involves creating a mega menu. Although I successfully made a responsive navbar, the challenge now is to implement a dropdown panel with 100% width. I've tried various approaches but haven't found one that works. Note: The oth ...

Issue opening react modal dialogue box

I'm encountering an issue while trying to implement the headless ui modal. I'm attempting to trigger the modal.js script from my home.js file. In my home.js file, I have the following code snippet: function Home() { const [isOpen, setIsOpen] = ...