3

I have a hyperlink which i am redirecting to a page.

$('.lnkMerging').on("click", function () {

            var id = $(this).attr('data-id');

            window.location = '/Merging/Index/?workItemID=' + id;
        });

My action in the controller page is

public ActionResult Index(int? workItemID)
        {
            MergingVM mergingVM = new MergingVM();
            mergingVM.SourceList = GetSourceDropdownList();
            mergingVM.WorkItem = (workItemID==null? 0: workItemID.Value) ;
            mergingVM.MergeActionSelectList = 
            GetMergeProcessActionDropdownList();
            PopulateDropDowns(mergingVM);
            return View(mergingVM);
        }

So what it does is when i click on the hyperlink it redirects me to the merging page. After redirecting to Merge page, the drop down fills with id(selected in home page) and correspondingly triggers the button click.

My issue When i reload the merge page the value in the drop down doesn't get clear. I.e if i have redirected from home page to merge page , then the drop down has some value. but when i refreshes it the selected value should go. I understand that the query string still holds the value. But is there any alternative to send parameter to action without using windows.location.href in jquery.

1
  • You can use Ajax to send parameters to your action.
    – Mr Alb
    Aug 22, 2017 at 12:26

5 Answers 5

0

If you are using hyperlink then also you can try it

$('.lnkMerging').on("click", function () {

        var id = $(this).attr('data-id');
        $(this).attr('href','/Merging/Index/?workItemID=' + id)
});
0
0

In order to clean the query string you should use redirect to another view.

    public ActionResult Index(int? workItemID)
    {
        MergingVM mergingVM = new MergingVM();
        mergingVM.SourceList = GetSourceDropdownList();
        mergingVM.WorkItem = (workItemID == null ? 0 : workItemID.Value);
        mergingVM.MergeActionSelectList =
        GetMergeProcessActionDropdownList();
        PopulateDropDowns(mergingVM);

        //to send this model to the redirected one.
        TempData["model"] = mergingVM;

         return RedirectToAction("CleanIndex");
    }

    public ActionResult CleanIndex()
    {
        var model = (MergingVM)TempData["model"] ?? new MergingVM();
       // Do something

        return View("Index", model);
    }

To find alternatives to an send parameter to a method you first need to understand the model Bindding action.

The model bidding searches a value in:

  • Form Data
  • Route Data
  • Query String
  • Files
  • Custom (cookies for example)

If your action must need to be HttpGet you lose the Form Data which would be a nice alternative for you.

4
  • I still have the same issue. What i want is after clicking on the hyperlink the workitem should be slected in the dro down. Aug 22, 2017 at 12:52
  • After refreshing the merging page itslef the drop down should be cleared. Aug 22, 2017 at 12:52
  • @TinoJoseThannippara, may I see what is in the GetMergeProcessActionDropdownList and PopulateDropDowns. Aug 22, 2017 at 12:57
  • @TinoJoseThannippara if the action don't must be httpGet I think you should consider the POST approach. Aug 22, 2017 at 12:59
0

If I understand correctly... the below worked for me.

If there's an ID appended to the URL, it gets logged to the console as the variable "param". The URL is then replaced (so that if you refresh the page, the ID is removed from the URL).

$(document).ready(function() {

    var url = window.location.toString;
    var hostname = window.location.hostname;
    var pathname = window.location.pathname;
    var param = window.location.search;
    $('.lnkMerging').on("click", function () {

        var id = $(this).attr('data-id');         
        window.location = '/new-page.php?' + id;

    });
    if ( pathname == "/new-page.php" && param ) {
        console.log(param);
        window.history.pushState("string", "Title", "http://yourURL.com/new-page.php");
        //Do something with param...
    }
});

This assumes that if there is no ID appended to the URL, the drop-down won't do anything. You also would need to update the URLs to the correct ones (I ran this on my local server).

1
  • does this do what you wanted?
    – jonhendrix
    Aug 23, 2017 at 9:17
0

I think you should use POST where you don't want to presist workItemID.

I mean all places where you have links you should use somethink like this:

<form action="/Merging/Index" method="POST">
    <input type="hidden" name="workItemID" value="1" /> <-- your Id
    <input type="submit" value="Link to workItemID 1!" /> <-- your link
</form>

This way you will get your View but without workItemID in URL. But you should change css to make your POST link look like <a> tags.

Here is with your table:

@if (@Model.DataSetList[i].StateID == 43)
{
    <td>
        <form action="/Merging/Index" method="POST">
            <input type="hidden" name="workItemID" value="@Model.DataSetList[i].Workitem_ID" />
            <input class="lnkMerging" type="submit" value="Merging" />
        </form>
    </td>
}
else
{
    <td>
        <text style="color:darkgrey" contenteditable="false">Merging</text>
    </td>
} 
2
  • Id int understand. This is my hyperlink which inputs workitem id as the parameter. How to change it to yours. Aug 22, 2017 at 13:04
  • @if (@Model.DataSetList[i].StateID == 43) { <td><a href="javascript:void(0);" class="lnkMerging" data-id="@Model.DataSetList[i].Workitem_ID" >Merging</a></td> } else { <td><text style="color:darkgrey" contenteditable="false">Merging</text></td> } Aug 22, 2017 at 13:17
0

You can save the parameter in local storage api of html5, and then use those parameters in Page load of index page.

$('.lnkMerging').on("click", function () {

    var id = $(this).attr('data-id');
    localStorage.setItem("workItemID",id);

    window.location = '/Merging/Index/;
});

On page load of index you can retrieve it using getItem localStorage.getItem("workItemID"); and use it as per your requirement.

On page load of Merge page, you have to explicitly set the selected option like below and then remove the value from local storage.

$(document).ready(function(){

if(localStorage.getItem("workItemID")!=null){
     $("#mydropdownlist").val(localStorage.getItem("workItemID"));
         localStorage.removeItem('workItemID');
    }
});

Make sure in var id = $(this).attr('data-id'); id should get same value as you have in the options on the merge page.

2
  • This removes the selected drop down when i click on the hyperlink since it reloads the page i.e when i click on the hyperlink it should redirect to another Merge page with retaining the source. But when refresh the merge page it should clear the drop down in the merge page Aug 22, 2017 at 12:50
  • Please find my updated answer explaining more in detail. Aug 22, 2017 at 13:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.