CODEWITHSUNDEEP
c#jqueryajaxasp.net-mvcrazor
LCaraway
LCaraway

Reputation: 1357

Render Views with Data as Query Strings Parameters

I have a controller that accepts several parameters for the index action. This controller returns a view by leveraging a lync to sql query as a PageList. return View(agreements.ToPagedList(pageNumber, pageSize));

I have a map on this page of which a user can zoom and pan. if the page is reloaded the map reloads to its default extent. I have some inputs that I post the extent parameters as the user manipulates the map.

What I need is to be able to capture these parameters so that when the view is reloaded/rendered... It renders with the extents parameters in the query string. I have coded javascript that handles the map to be able to pull these parameters from the URL and zoom to the appropriate location on the map.

I have 6 inputs that are manipulated by the map javascript.

<input type="text" class="extent-i vertical-align-center" readonly id="xmin-h" />
<input type="text" class="extent-i" readonly id="ymin-h" />
<input type="text" class="extent-i vertical-align-center" readonly id="xmax-h" />
<input type="text" class="extent-i" readonly id="ymax-h" />
<input type="text" class="extent-i" readonly id="wkid-h" />
<input type="hidden" id="json-h" />

These corespond to the XMIN, YMIN, XMAX, YMAX, WKID (Spatial Reference), and the json is an object that contains all of the above.

Using JQUERY and MutationObserver I am able to detect these changes. I then send them to the controller using ajax.

function sendExtent(xmin,ymin,xmax,ymax,wkid){
var data = {
    XMIN: xmin,
    YMIN: ymin,
    XMAX: xmax,
    YMAX: ymax,
    WKID: wkid

}

$.ajax({
   url: '@Url.Action("Index","Home")',
   data: data
});

var extentJson = $("#json-h").val();
var json = JSON.parse(extentJson);

     XMIN = json["XMIN"];
     YMIN = json["YMIN"];
     XMAX = json["XMAX"];
     YMAX = json["YMAX"];
     WKID = json["WKID"];
  }

  sendExtent(XMIN, YMIN, XMAX, YMAX, WKID);

Controller is as follows:

  public ViewResult Index(string sortOrder, string currentFilter, string searchString, int? page, double? XMIN, double? YMIN, double? XMAX, double? YMAX, int? WKID, int? AGMT_NUM, string DisplayAs)
        {
            ViewBag.DisplayAs = DisplayAs;
            ViewBag.XMIN = XMIN;
            ViewBag.YMIN = YMIN;
            ViewBag.XMAX = XMAX;
            ViewBag.YMAX = YMAX;
            ViewBag.WKID = WKID;
            (...)
            (...)
            // some logic to manipulate data based sortOrder etc...


            int pageSize = 10;
            int pageNumber = (page ?? 1);
            return View(agreements.ToPagedList(pageNumber, pageSize));

The ajax call does not reload the page however though it does execute and i can confirm the values pass successfully. Do to the nature of the dynamic map, i do not want the view to reload every time, thus this behavior is good.

What i need is to some how manage these extent changes so that when the view is refreshed or rendered, for example, when a table gets sorted or paged, the extent parameters will post to the url similiar to blah blah/?blah blah &XMIN=1234&YMIN=5678.....etc...

UPDATE

Here is an example of a user action that causes the page to be re-rendered. It is triggered when a user selects something from a drop down.

/button>
<ul class="dropdown-menu" id="display-as-ul">
    <li>@Html.ActionLink("Agreement Type", "Index", new {DisplayAs = "Type", page = ViewBag.Page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })</li>
    <li>@Html.ActionLink("Leese Expiration", "Index", new {DisplayAs="Expiration", page = ViewBag.Page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter})</li>
</ul>

This passes the appropriate parameters to the controller which then reloads the page. As seen above the "DisplayAs" parameter is then stored in the URL. Similiar to what i am trying to do with the extent, the map is smart enough to pull that parameter from the url and manipulate what is displayed.

This works here because the workflow goes from VIEW -> CONTROLLER -> VIEW(w/URL) -> EMBEDED MAP..

This is different from the extent problem in two ways: 1) The page does not need to render everytime the extent changes, the params only need to post when something else causes the page to render/reload. 2) Workflow is as follows: EMBEDED MAP -> VIEW -> ????????

If this is way off please tell me what you would do

Upvotes: 0

Views: 68

Answers (1)

NicoJuicy
NicoJuicy

Reputation: 3528

I have something similar in an app.

I use PartialViews which can be loaded through a normal page request and an ajax call.

When the page is loaded, everything loads

When something changes, an ajax call is made and i replace the part with the same class name.

Upvotes: 1

Related Questions