We help IT Professionals succeed at work.

ASP.NET MVC 5:  Getting

cdemott33
cdemott33 asked
on
Hi - I need help.  I'm new to MVC development and RESTful API architecture and could use some help.

Here's an an example of my URL:

www.mysite.com/customer/details/1

In the details View I want to make a GET AJAX call to my web API that passes that "1" parameter to the GET method.  

How do I pass that parameter (1) to the VIEW to call the API to GET the data?
Comment
Watch Question

Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
I am not clear on the requirement
If you want to call this
var url="www.mysite.com/customer/details/1"

Open in new window

Then just call it ...
$.get(url, function(resp){
  // handle response
});

Open in new window


What am I missing?

Author

Commented:
Sorry if my question was unclear.

The routing to "www.mysite.com/customer/details/1" is handled by the customer controller, but in the details View, I want to call the GET function in the Customer API controller and pass the "1" as a parameter in the API GET call. Does this make sense? Or is this a totally wrong approach?
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
It depends on how your MVC has been setup.

Usually a URL like www.mysite.com/customer/details/1 is calling a controller customer, view details parameter 1 so I am not sure what you are asking here?
Are you saying that you want to either:
  • Make a call to a different REST API from the Customer 1 Detail after the content renders in the browser?
  • Make a call to a different REST API from within the CustomerController.Details(int id) function?

Author

Commented:
Let me try and better explain.

I need to get a distinct customer and display his or her details on the webpage.  To do this I need the parameter that is provided in the query string. (ie. www.mysite.com/customer/details/1)  In my case the parameter is the number 1.

My MVC Controller only returns the view.  It does not return data.  

public ActionResult Details()
        {
            return View();
        }

Open in new window


My API Controller does the work on querying the database.

        public IHttpActionResult GetCustomer(int Id)
        {
            var customer = _context
                .Customers
                .Include(c => c.IntakeType)
                .Include(c => c.Segment)
                .SingleOrDefault(c => c.Id == Id);

            if (customer == null)
                return NotFound();

            return Ok(Mapper.Map<Customer, CustomerDto>(customer));
        }

Open in new window


On my view page I have my AJAX code.  Here's a snippet:

$.ajax({
                url: '/api/customers/',   <--- THIS LINE HERE.
                dataSrc: "",
                type: "GET",
                data: {}
            }).done(function (data) {

Open in new window


The line I marked above is where I'm stuck.  I need to pass the parameter of "1" to the Customer API Controller so I can return that individual customers data.

How can I pass that parameter to the URL line so instead of this...

 url: '/api/customers/',

... it passes this...

url: '/api/customers/1',
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
This is where I am confused why not just make the code in your view
var id = <%= CLIENTID HERE%>;
$.ajax({
                url: '/api/customers/' + id,   <--- THIS LINE HERE.
                dataSrc: "",
                type: "GET",
                data: {}
            }).done(function (data) {

Open in new window

Or code it directly into the URL string
You can also do
var data = {id: <%= CLIENTID HERE%>}
$.ajax({
                url: '/api/customers/',   <--- THIS LINE HERE.
                dataSrc: "",
                type: "GET",
                data: data
            }).done(function (data) {

Open in new window

Assumes your controller is looking for a url of controller/view?id=1 as an alternative

Basically the question is - why can't you simply just add the number to this line
                url: '/api/customers/',   <--- WHY CAN'T YOU JUST ADD IT HERE AS PART OF THE RENDER

Open in new window

Author

Commented:
Sorry, but I'm just very new to this so please bare with me.  

I would love to implement what your suggesting.  My question has to do with, how do you get this...

<%= CLIENTID HERE%>;

Should I pass the parameter value from the MVC Contoller via a ViewModel to the View like this...

public ActionResult Details(int id)
        {
            var vm =  new DetailsViewModel {
                Id = id
            };
            return View(vm);
        }

Open in new window


and then inject that value into my AJAX code like this?

$.ajax({
                url: '/api/customers/' + @Model.Id,
                dataSrc: "",
                type: "GET",
                data: data
            }).done(function (data) {

Open in new window


Is this the best way to approach this?  Again, I'm a newbie so I'm just looking for best practice for my situation.
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
My question has to do with, how do you get this...
I am working on partial information here - I have no sight of your code or how it is implemented so I have provided a general approach with the expectation that you will adapt to suite your implementation.
<%= %> is the standard .Net output tags
ClientID - I have no idea where you are storing client id (the 1) I assume in a variable somewhere - you need to replace that

As to what is the best approach - again  I can't answer that on so few bits of information.

Let's look at it like this:
Your question is asking how to get the '1' into the url.
The answer is there are many ways - first we need to know where that value comes from - where in your model is that value stored.
Once we know that we can start examining ways to use that variable - which one is best is much of a muchness I am guessing - whatever is a best fit for you.

In your jQuery you have an AJAX call that requires a URL - you need that URL to include the Client ID (or similar) - the '1' - so how do we get it there.

Let's say that the model value is not available at the point that the AJAX is generated - not sure why it wouldn't be but for argument sake let us assume it is.

What you can do is output the value into a JavaScript variable somewhere else in your code
(Note I have no idea if this is correct - again no sight of your code base so I am guessing)
<script>var ClientID = '<%=@Model.id%>';</script>
Now we have a global variable ClientID on the page that holds the ID
Our jQuery can now assume that it is there and simply append it to the AJAX url
$.ajax({
    url: url: '/api/customers/' + ClientID

Open in new window


That is one method.

The other method is to add it to the URL as part of the render i.e. the result (in the browser) is the complete URL

As you have it here
url: '/api/customers/' + @Model.Id,

Open in new window

I don't believe will work as #Model.Id exist in the JavaScript space - i.e. unless I am misreading how your code works - the resulting line in the browser will include the string @Model.Id - which has no meaning in the browser and will generate an error.

I would have expected to see some sort of script tags to enclose the output of the model id i.e something like this
url: '/api/customers/<%=@Model.Id%>',

Open in new window

Again, I am guessing due to lack of necessary information.

Author

Commented:
Thank you for your help.  This puts me on the right path.
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You are welcome.