I have implemented MVC partial controls on my page twice to handle search functionality. Each partial control has its own controller for searching, resulting in my page having two controllers with the same name.
<div ng-app="app" ng-controller="MainController" ng-init="SetSearchParam()">
<div id="search1">
@Html.Partial("_SearchPartial") // named search1
// additional code for displaying search results
// ....
// ..
</div>
<div id="search2">
@Html.Partial("_SearchPartial") // named search2
// additional code for displaying search results
// ....
// ..
</div>
</div>
This is the code for _SearchPartial:
<form name="SearchCommon">
<div ng-model="search" ng-controller="SearchPartialController">
<div>
<input type="text" value="" placeholder="Stock" ng-model="search.Stock" />
</div>
<div>
<input type="text" value="" placeholder="Make" ng-model="search.Make" />
</div>
<div>
<input type="text" value="" placeholder="Year" ng-model="search.Year" />
</div>
<div>
<input type="submit" value="SEARCH" ng-click="searchdata(search)" />
</div>
</div>
</form>
At the initialization of MainController, I set the search model value in the SetSearchParam() method as follows:
$scope.SetSearchParam = function(){
var s = {};
s.Make = "Test";
s.Year = "2012";
s.Stock = "5"
$scope.search = s;
};
Since the search model is utilized in the SearchPartialController and there are two search controls on the page, the value of s is set in both partial controllers. Consequently, changes made to search1 parameters reflect in search2 and vice versa.
I am seeking a solution to have the search parameters set exclusively for search1 and not affect search2. Modifications to search1 parameters should not impact search2 and vice versa.
Is there a method to accomplish this?